jQuery Plugin For Smart Sticky Header On Scroll - jPinning

File Size: 94.5 KB
Views Total: 4576
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Smart Sticky Header On Scroll - jPinning

jPinning is a lightweight jQuery plugin to create a smart & user-friendly sticky header navigation that auto hides while window scrolls down and brings the header back on window scroll up.

See also:

How to use it:

1. Load the jPinning.css in the header, and the jPinning.js in the footer but after the jQuery JavaScript library.

<link href="path/to/jPinning.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="path/to/jPinning.js"></script>

2. Create a regular navigation for your website.

<nav>
  ...
</nav>

3. Call the plugin on the navigation and done. The plugin will do the rest.

$('nav').jPinning();

4. Default settings.

$('nav').jPinning({

//offset for header to hide or show in pixels
offset: false,

//Fires when the header shows up
onPin: function(){}, 

//Fires when the header hides out
onUnpin: function(){} 

});

Change log:

2016-03-28

  • Fix for the header getting pinned when it reaches bottom.

2016-01-05

  • Added "offset" option.

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