jQuery Plugin To Make Element Sticky Within A Container - Sticky

jQuery Plugin To Make Element Sticky Within A Container - Sticky
File Size: 7.15 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Just another jQuery sticky plugin (~2kb) which makes any element (typically sidebar widgets) sticky until you scroll the webpage to the bottom of its parent container.

How to use it:

1. Include jQuery library along with the jquery.sticky.min.js script before the closing body tag of your HTML document, as shown below.

<body>
  ...
  <script src="//code.jquery.com/jquery.min.js"></script>
  <script src="jquery.sticky.min.js"></script>
</body>

2. Call the function on the target element to be fixed at top on page scroll.

$('.sticky').sticky();

3. Specify the top & bottom offsets of the sticky element when scrolling.

$('.sticky').sticky({
  topSpacing: 0,
  bottomSpacing: 0,
});

4. Events available.

$('.sticky').on('sticky-start', function() { 
  // start
});

$('.sticky').on('sticky-end', function() { 
  // end
}); 

$('.sticky').on('sticky-bottom-reached', function() { 
  // reached bottom
});

$('.sticky').on('sticky-bottom-unreached', function() { 
  // unreached bottom
});

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