jQuery Plugin To Stick Any Html Elements While Scrolling

A small jQuery plugin that allows to make any elements "sticky" as soon as they reach the top of the page when you scroll down.

How to use it:

1. Load the sticky jQuery plugin after loading jQuery library in your document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="path/to/jquery.sticky.min.js"></script>

2. Call the plugin on any Html elements which you wish to make them sticky.

$(function(){
  $('nav').sticky();
});

3. That's it. Here are several options to customize the sticky function.

$('nav').sticky({

// the distance (in px) from the top of the page
top: '0',

// the width value applied when the element is stuck
width: '100%',

// the z-index value applied when the element is stuck.
'z-index': '10000000',

// indicates if the different elements stick over the previous
superposition: false

});

4. Events.

$('nav').sticky()
.on('stick', function(){
  // do something
})
.on('unstick', function(){
  // do something
});

Change logs:

2015-01-23

• fix bug of shifting

2015-01-05

• handle the resiez of the page

---

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