jQuery Plugin For On-demand Sticky Header Navigation

A jQuery plugin to create an animated sticky header that hides the top navigation bar when scrolling down and shows it when scrolling up. Similar to the Google Chrome address bar on mobile devices. Comes with 4 types of animations and more that 28 build-in easing effects.

How to use it:

1. Load the jQuery javascript library and the jQuery Sticky Header plugin in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.sticky-header.min.js"></script>

2. Create the Html for a sticky header.

<header id="sticky-header">
 ...
</header>

3. Call the function to enable the plugin.

jQuery( document ).ready( function() {
jQuery( '#sticky-header' ).stickyHeader();
});

4. Options and defaults.

jQuery( document ).ready( function() {
jQuery( '#sticky-header' ).stickyHeader({
effect: "move", // move, slide, or fade
easing: "ease", // built-in easing options
speed: 350,
afterInit: false,
onOpen: false,
onClose: false
});
});

---

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