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 |
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:
- Medium Style Sticky Unveiled Navigation with jQuery
- Show/Hide Sticky Navigation with jQuery and CSS3
- jQuery Plugin For On-demand Sticky Header Navigation
- jQuery Plugin To Hide Sticky Navbar When Scrolling Down - Scroll Up Menu
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.