jQuery Plugin For Smart Sticky Header On Scroll - jPinning

File Size: 94.5 KB
Views Total: 4561
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.


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


4. Default settings.


//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:


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


  • 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.