Make Multiple Elements Sticky When User Scrolls – Stuck.js

Category: Javascript , Layout | June 7, 2019
Author: RyoNkmr
Views Total: 1,127
Official Page: Go to website
Last Update: June 7, 2019
License: MIT

Preview:

Make Multiple Elements Sticky When User Scrolls – Stuck.js

Description:

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

You Might Be Interested In:


Leave a Reply