Author: | jziggas |
---|---|
Views Total: | 188 views |
Official Page: | Go to website |
Last Update: | November 9, 2018 |
License: | MIT |
Preview:

Description:
sticky.ts is a vanilla JavaScript plugin used to pin a single element or multiple elements within a specific container while scrolling down.
How to use it:
Install and import:
# NPM $ npm install sticky-ts --save
import {Sticky} from 'sticky-ts'
Or directly download the zip and then import the sticky.min.js
into the document.
<script src="sticky.min.js"></script>
Create a new Sticky instance and specify the element to fix on the top.
<div data-sticky-container> <div class="sticky"> Element 1 </div> <div class="sticky"> Element 2 </div> ... </div>
let sticky = new Sticky('.element');
Config the sticky.ts library with the following HTML data
attributes:
- data-sticky-wrap: Sets true to wrap the sticky element is in the span element. Prevents content from “jumping”. Defaults to false.
- data-margin-top: Top margin in pixels
- data-sticky-for: Specify the breakpoint to disable the Sticky behavior. Defaults to 0.
- data-sticky-class: Additional CSS class(es) when stuck
<div class="sticky" data-sticky-wrap="true" data-margin-top="10" data-sticky-for="768" data-sticky-class="custom-class"> Element </div>