jQuery Plugin For Sticky Heading Elements - Sticky Header

Sticky Header is a jQuery plugin that makes the hierarchical sections' headers sticky at the top of the page as you scroll down.

How to use it:

1. Include the jQuery library and jQuery sticky header plugin at the bottom of the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="jquery.stickyheader.js"></script> 

2. Create the sticker headers following the Html structure like this.

<div class="sticky-container">

<div class="sticky">
<h2>Heading 1</h2>
</div>

<div class="sticky-container">
<div class="sticky">
<h3>Heading 1.1</h3>
</div>
<div class="placeholder-content">Your content goes here</div>
</div>

<div class="sticky-container">
<div class="sticky">
<h3>Heading 1.2</h3>
</div>
<div class="placeholder-content">Your content goes here</div>
</div>

<div class="sticky-container">
<div class="sticky">
<h3>Heading 1.3</h3>
</div>
<div class="sticky-container">
<div class="sticky">
<h4>Heading 1.3.1</h4>
</div>
<div class="placeholder-content">Your content goes here</div>
</div>
</div>

</div> 

3. Initialize the sticky header using the default options, which will expect elements with classes 'sticky' and 'sticky-container'.

$('body').stickyHeader();

4. Style the plugin however you want.

h1, h2, h3, h4, h5 {
...
}

.sticky-container {
...
}

.sticky-active, .sticky-inactive {
...
}

.sticky-active-bottom {
...
}

---

This awesome jQuery plugin is developed by aekendall. For more Advanced Usages, please check the demo page or visit the official website.