Stacked Sticky Elements In Pure JavaScript – stickystack

Preview:

Description:

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