Simple jQuery Plugin For Sticky Headers On Scroll - stickyHeaders

An extremely simple jQuery plugin used to make the content headers sticky at the top of their parent container as you scroll down.

How to use it:

1. Add jQuery library together with jquery.stickyheaders.js and stickyheaders.css in the document.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="jquery.stickyheaders.js"></script>
<link rel="stylesheet" href="stickyheaders.css">

2. Make the elements with CSS class of 'stickyHeader' always sticky at the top of the parent container with CSS class of 'stickyContainer'.

<div class="stickyContainer">
  <div class="stickyHeader">Header 1</div>
    ... content ...
  <div class="stickyHeader">Header 2</div>
    ... content ...
  <div class="stickyHeader">Header 3</div>
    ... content ...
</div>

3. Call the plugin on the container and done.

$('.stickyContainer').stickyHeaders();

---

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