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.