Basic Sticky Header Navigation Plugin For jQuery - StickyNav

File Size: 7.62 KB
Views Total: 1260
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></script>
<script src="dist/StickyNav.min.js"></script>

2. Call the plugin on the target element.


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;
  stickAt: _h

5. Callback functions available.

  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.