Stacked Sticky Elements In Pure JavaScript – stickystack

Category: Javascript | April 11, 2017
Author: jrsouth
Views Total: 2,949
Official Page: Go to website
Last Update: April 11, 2017
License: MIT

Preview:

Stacked Sticky Elements In Pure JavaScript – stickystack

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

You Might Be Interested In:


Leave a Reply