Lightweight CSS Position:sticky Polyfill - stickybits
File Size: | 44.6 KB |
---|---|
Views Total: | 2818 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
stickybits is a CSS position:sticky polyfill that allows to fix any element to the top of the webpage, with a position:fixed
fallback for legacy browser. Can be implemented in either jQuery or vanilla JavaScript.
How it works:
- Add the CSS class '.js-is-sticky' to the desired element when it becomes sticky at the top of the webpage.
- Stick the element to the bottom of its parent element when you scroll past it.
Install it via package managers:
# Yarn yarn add stickybits # NPM $ npm install stickybits # Bower $ bower install stickybits
How to use it:
1. Add the main JavaScript file stickybits.js
(Vanilla JavaScript) or jquery.stickybits.js
(jQuery) to your html page.
<!-- Vanilla JavaScript --> <script src="stickybits.min.js"></script> <!-- jQuery --> <script src="jQuery.min.js"></script> <script src="jquery.stickybits.min.js"></script>
2. Initialize the stickybits plugin on an element you specify.
// Vanilla JavaScript stickybits('selector'); // jQuery $('selector').stickybits();
3. Possible options with default values.
$('selector').stickybits({ scrollTarget: window stickyBitStickyOffset: 0, verticalPosition: top, useStickyClasses: false });
4. Style the element & its parent container depending on the 'sticky' state.
.js-is-sticky { ... } .js-is-stuck { ... } .js-stickybit-parent { }
About author:
Author: Jeffry Wainwright
Website: https://dollarshaveclub.github.io/stickybits/
This awesome jQuery plugin is developed by dollarshaveclub. For more Advanced Usages, please check the demo page or visit the official website.