jQuery Plugin For Sticky Header Elements - clingify

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

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.