Responsive Customizable Sticky Anything Plugin - jQuery Sticky-Anything
| File Size: | 17.7 KB |
|---|---|
| Views Total: | 1146 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Sticky-Anything is a simple yet highly customizable jQuery plugin that makes anything (e.g. header navigation, sidebar widgets, etc) sticky until a specific element (typically page footer element) is scrolled into view.
How to use it:
1. Just include the JavaScript file jq-sticky-anything.min.js after jQuery library and the Sticky-Anything is ready for use.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jq-sticky-anything.min.js"></script>
2. Call the main function on the target element which should be stuck at the top of the screen when scrolling.
$('.sidebar, nav').stickThis();
3. Set the top offset in pixels when the element is sticky.
$('.sidebar, nav').stickThis({
top: 70
});
4. Set the min/max screen width to enable the plugin. Useful to disable the plugin on small screen devices such as tablet and mobile.
$('.sidebar, nav').stickThis({
minscreenwidth: 0,
maxscreenwidth: 999999
});
5. Set the z-index property of your sticky element.
$('.sidebar, nav').stickThis({
zindex: 999
});
6. 'Unstick' the element when a specific element is scrolled into view.
$('.sidebar, nav').stickThis({
pushup: 'footer'
});
This awesome jQuery plugin is developed by senff. For more Advanced Usages, please check the demo page or visit the official website.











