jQuery Plugin To Make Element Sticky Within A Container - Sticky
File Size: | 7.15 KB |
---|---|
Views Total: | 2779 |
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.