jQuery Plugin For Sticky Header Elements - clingify
File Size: | 116KB |
---|---|
Views Total: | 3528 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Clingify is a jQuery plugin that makes it easy to create sticky headers and navigation menus for your long web page. Once you scroll past the targeted element, the plugin will toggle a CSS class that gives the element a fixed position, pinning it to the top of the page.
How to use it:
1. Include jQuery Clingify stylesheet file in the header
<link rel="stylesheet" href="styles/clingify.css">
2. Create a navigation menu
<nav class="demo"> <ul> <li>Menu 1</li> <li>Menu 2</li> <li>Menu 3</li> ... </ul> </nav>
3. Include jQuery library and jQuery Clingify plugin on the page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.clingify.js"></script>
4. Call the plugin with options
<script type="text/javascript"> $(function() { $('.demo').clingify({ breakpoint: 0, // in pixels extraClass: '', throttle: 100, // in milliseconds // Callback functions: detached: $.noop, locked: $.noop, resized: $.noop}); }); </script>
Change log:
v1.0.1 (2013-07-22)
- Fix for resizing fluid width pages wherein the element's original position within document may have changed
- Updated generated CSS/js for demo
This awesome jQuery plugin is developed by theroux. For more Advanced Usages, please check the demo page or visit the official website.