jQuery Plugin For Sticky Heading Elements - Sticky Header
File Size: | 12.8 KB |
---|---|
Views Total: | 1633 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.