Author: | rgalus |
---|---|
Views Total: | 4,108 views |
Official Page: | Go to website |
Last Update: | April 30, 2020 |
License: | MIT |
Preview:

Description:
sticky-js is a small vanilla JavaScript library which makes DOM elements to be fix positioned relative to the whole page or its parent container.
How to use it:
1. Load the minified version of sticky-js at the end of the document so the pages load faster.
<script src="dist/sticky.min.js"></script>
2. Add the data-sticky
attribute to dom elements which will be stick on vertical page scrolling.
<img src="1.jpg" data-sticky>
3. Create a new sticky-js instance and done.
var sticky = new Sticky('[data-sticky]');
4. Set the top offset using data-margin-top
attribute like this:
<img src="1.jpg" data-sticky data-margin-top="100">
5. Disable the sticky behavior on mobile devices (smaller than 468px in this instance)
<img src="1.jpg" data-sticky data-sticky-for="468">
6. Add additional CSS classes to the sticky element. Default: null.
<img src="1.jpg" data-sticky data-sticky-class="is-sticky">
7. Prevents content from “jumping” by setting the sticky-wrap
to true.
<img src="1.jpg" data-sticky data-sticky-wrap="true">
8. Update & destroy the sticky element.
sticky.update(); sticky.destroy();
Changelog:
04/30/2020
- v1.3.0: Fixed Uncaught TypeError: Cannot set property ‘Sticky’ of undefined
01/13/2020
- v1.2.2: Fixed Uncaught TypeError: Cannot set property ‘Sticky’ of undefined
01/09/2020
- v1.2.1: Fix memory leak
thank you for code and your hard work .