Basic Sticky Header Navigation Plugin For jQuery - StickyNav

StickyNav is a super tiny jQuery plugin makes your header navigation (or any elements) fixed on the top when scrolling down. With support for onStick and onUnStick callback functions.

How to use it:

1. Download the plugin and place the main JavaScript file StickyNav.min.js after jQuery library.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="dist/StickyNav.min.js"></script>

2. Call the plugin on the target element.

$("header").StickyNav();

3. The plugin will automatically add a CSS class 'sticky' to the element when you scroll past it. So that we can make it sticky using the CSS position: fixed property as this:

.sticky {
  max-width: 1000px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
}

4. Specify the scroll position to trigger the StickyNav function.

var _h = $("header").offset().top;
$("header").StickyNav({
  stickAt: _h
});

5. Callback functions available.

$("header").StickyNav({
  onStick: function(){
    // when the element sticks   
  },
  onUnStick  : function(){
    // when the nav reverts 
  }
});

---

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