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