This time I will share jQuery Plugin and tutorial about Fix Element Within Parent Container On Scroll – sticky.jquery.js, hope it will help you in programming stack.
sticky.jquery.js is a small jQuery plugin for making an element always be fixed within its parent container when scrolling down.
The plugin sticks the element to the top of the webpage until it reaches a ‘Stop’ element.
A typical use of this plugin is to make a widget always stay visible within the sidebar.
It also has the ability to stop the ‘Sticky’ behavior on mobile devices to prevent breaking the page layout.
How to use it:
1. Insert the sticky.jquery.js script after the latest version of jQuery JavaScript library (slim build).
2 |
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" |
3 |
crossorigin="anonymous"> |
5 |
<script src="sticky.jquery.js"></script> |
2. Create a ‘Stop’ element at which point the sticky element stops the ‘Sticky’ behavior.
1 |
<div class="main-content-end-padding"> |
3. Call the function on your element which should be sticky as you scroll past it.
1 |
<div class="sticky-content"> |
2 |
$('.sticky-content').StickyDL(); |
4. Available options to customize the plugin.
01 |
$('.sticky-content').StickyDL({ |
07 |
heightRefElement: '.main-content-end-padding', |
This awesome jQuery plugin is developed by ilama007. For more Advanced Usages, please check the demo page or visit the official website.
