Pure JavaScript Sticky Element Library – sticky-js

Category: Javascript , Others | July 25, 2016
Author: rgalus
Views Total: 1,407
Official Page: Go to website
Last Update: July 25, 2016
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:

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>

Add the data-sticky attribute to dom elements which will be stick on vertical page scrolling.

<img src="1.jpg" data-sticky>

Set the top offset using data-margin-top attribute like this:

<img src="1.jpg" data-sticky data-margin-top="100">

Create a new sticky-js instance and done.

var sticky = new Sticky('[data-sticky]');