jQuery Plugin For Multiple Sticky Elements - stickyElement.js
| File Size: | 80.6 KB |
|---|---|
| Views Total: | 1155 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Yet another mobile-friendly jQuery sticky element plugin which makes multiple elements stick to the top of the webpage and comes with a lots of options to customize the 'Sticky' behavior.
How to use it:
1. Import the latest jQuery library (slim build) and the jQuery stickyElement.js script into the page.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous">
</script>
<script src="stickyElement.min.js"></script>
2. Call the function stickyElement on the target elements which should be sticky on page scroll.
<nav id="example1"> Sticky Nav Here </nav>
$('#example').stickyElement();
3. Customize the sticky plugin with the following options.
$('#example').stickyElement({
// top offset
top: 0,
// left offset
left: null,
// min/max width to trigger the plugin
minWidth: null,
maxWidth: null,
// additional CSS for the sticky element(s)
addClass: null,
// additional attributes for the sticky element(s)
addAttributes: null,
// enable/disable fade animation
fade: false
});
This awesome jQuery plugin is developed by agriboed. For more Advanced Usages, please check the demo page or visit the official website.











