Pure JavaScript Sticky Element Library – sticky-js

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

Preview:

Pure JavaScript Sticky Element Library – sticky-js

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

You Might Be Interested In:


One thought on “Pure JavaScript Sticky Element Library – sticky-js

Leave a Reply