Make Multiple Elements Sticky When User Scrolls – Stuck.js

Stuck.js is a small JavaScript plugin that has the ability to make multiple stacked and sticky on page scroll.

Ideally for sticky header navigation, sidebar advertisements, etc.

How to use it:

Download from NPM and import the Stuck.js into the document.

# NPM
$ npm install stuck-js --save

import { Stuck } from stuck-js

Initialize the library and specify the element to be fixed on the top of the webpage when scrolling down.

const instances = new Stuck([
      { 
        selector: '#el-1', 
        marginTop: 10 
      },
      { 
        selector: '#el-2', 
        wrapper: '#container' 
      },
]

Changelog:

v2.1.4 (06/07/2019)

• fix bug that the placeholder element will be not found before placed on DOM in some cases

v2.0.1 (06/06/2019)

• remove static methods and static properties and create singleton manager classes
• fix import-time undefined “window” error

v1.0.0 (06/05/2019)

• Code Refactoring

09/13/2018

• v0.7.0