Stacked Sticky Elements In Pure JavaScript – stickystack

Category: Javascript | April 11, 2017
Views Total:1,691 views
Official Page:Go to website
Last Update:April 11, 2017


Stacked Sticky Elements In Pure JavaScript – stickystack


stickystack is a pure JavaScript library that makes multiple elements stacked and fixed on the top of the webpage when scrolling down.

How to use it:

Include the JavaScript file stickystack.js (or stickystack.es5.min.js) inside your html document.

<script src="stickystack.js"></script>

Add the CSS class ‘js-stickystack’ to target element which should be fixed on the top while scrolling down.

<h2 class="js-stickystack">Heading 1</h2>
<h2 class="js-stickystack">Heading 2</h2>

Disable the ‘Sticky’ behavior on mobile devices (less than 768px):

<h2 class="js-stickystack js-stickystack-nomobile">Heading 3</h2>

Stick until pushed offscreen by another sticky element.

<h2 class="js-stickystack js-stickystack-semi">Headlign 3</h2>

All default parameters:

mobileBreak : 768,
list: [],
number: 0,
stackTop: 0

You Might Be Interested In:

Leave a Reply