Stick Sidebar Widgets To The Top Until Reaching The Bottom - sticksy
File Size: | 45.8 KB |
---|---|
Views Total: | 3091 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

sticksy is a small and fast JavaScript/jQuery Sticky plugin which makes any element sticky within its parent container using position: absolute
attribute.
Use this plugin to fix the sidebar widgets to the top of the page on page scroll until the widgets reach the bottom of their parent container.
How to use it:
1. Install & download the plugin.
# Yarn $ yarn add sticksy # NPM $ npm install sticksy --save
2. Load the sticksy.js script in the document. Note that jQuery is OPTIONAL.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/dist/sticksy.min.js"></script>
3. Or from a CDN.
<script src="https://cdn.jsdelivr.net/npm/sticksy@latest/dist/sticksy.min.js"></script>
4. Attach the plugin to the element which should be fixed on the top when scrolling down.
<aside class="sidebar"> <div class="widget is-sticky"> <h2>Widget 1</h2> </div> <div class="widget"> <h2>Widget 2</h2> </div> <div class="widget"> <h2>Widget 3</h2> </div> </aside>
// As Vanilla JavaScript plugin new Sticksy(document.querySelector('.is-sticky')); // As jQuery plugin $('.widget.is-sticky').sticksy();
5. Specify the distance from the top when the sidebar widgets get stuck. Default: 0.
// As Vanilla JavaScript plugin new Sticksy(document.querySelector('.is-sticky'),{ topSpacing: 70 }); // As jQuery plugin $('.widget.is-sticky').sticksy({ topSpacing: 70 });
6. Determine whether or not to listen for the DOM changes in the container. Default: false.
// As Vanilla JavaScript plugin new Sticksy(document.querySelector('.is-sticky'),{ listen: true }); // As jQuery plugin $('.widget.is-sticky').sticksy({ listen: true });
7. API methods.
var instance = new Sticksy(document.querySelector('.is-sticky')); // refresh the current state instance.refresh(); // hard refresh instance.hardRefresh(); // enable/disable instance.enable(); instance.disable();
8. Fire an event when the state of the sticky element has been changed.
var instance = new Sticksy(document.querySelector('.is-sticky')); instance.onStateChanged = function(state){ // your handler here if (state === 'fixed') alert('it's fixed!') }
9. Static methods.
// refresh Sticksy.refreshAll(); Sticksy.hardRefreshAll(); // enable/disable Sticksy.enableAll(); Sticksy.disableAll();
Changelog:
v0.2.0 (2020-12-05)
- Added new enable() and enableAll() methods.
v0.1.2 (2019-10-01)
- Improved change detection
This awesome jQuery plugin is developed by kovart. For more Advanced Usages, please check the demo page or visit the official website.