Stick Heading To The Top When Scrolling Past It - jQuery sticky-headings.js

A small jQuery plugin for sticky headings that makes headers of page sections stuck on the top when scrolling past them.

The plugin detects the window scroll event and sticks the appropriate header to the top using CSS position: fixed property. Only one header is allowed to be fixed on the top of the page at the same time.

How to use it:

1. Load the JavaScript sticky-headings.js after the latest jQuery JavaScript library (slim build is recommended).

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="sticky-headings.js"></script>

2. Call the function stickyheadings() on the heading elements within the document. That's it.

<h2 class="sticky-header">Section One</h2>
...

<h2 class="sticky-header">Section Two</h2>
...

<h2 class="sticky-header">Section Three</h2>
...

$(function(){
  $('.sticky-header').stickyheadings();
});

3. Optionally, you can specify the distance from the top when the headers get stuck.

$(function(){
  $('.sticky-header').stickyheadings({
    offset: 10
  });
});

4. Apply extra CSS styles to the sticky headings.

.is_stuck {
  /* CSS Styles Here */
}

---

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