Minimal Sticky Element Library – sticky.js

Preview:

Description:

A minimal sticky element JavaScript class that enables an element to be fixed on the top when scrolling down the page.

How to use it:

1. Create an element that should be sticky on scroll.

<div id="stickyDemo" class="stickyDemo">
  Sticky Element
</div>

2. Stick the element to the top of the page.

#stickyDemo.sticky {
  position: fixed;
  top: 50px;
  left: 0px;
  right: 0;
  margin: auto;
  z-index: 1;
}

3. Include the sticky.js JavaScript library on the page.

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

4. Attach the function Sticky to the element and done. The boundary parameter allows you to specify a boundary to which the sticky element should append when getting stuck.

let stickyDemo = document.getElementById('stickyDemo');
let boundaryDemo = document.getElementById('boundaryDemo');
let stickyObjDemo = new Sticky(stickyDemo, boundaryDemo);

5. Enable the element to be sticky within a container (parent container for example).

let stickyDemo = document.getElementById('stickyDemo');
let boundaryDemo = document.getElementById('boundaryDemo');
let stickyViewportDemo = document.getElementById('stickyViewportDemo');
let stickyObjDemo = new Sticky(stickyDemo, boundaryDemo, stickyViewportDemo, true);

Changelog:

06/18/2021

• Update