Fast And Flexible Sticky Block JavaScript Library – Vanilla-Sticky

Preview:

Description:

Sticky elements have been a hot topic and a trending one in the last few years. In a nutshell, sticky elements are those having styles or functionality that “stick” to the top (or bottom) of the page no matter how far down you scroll.

Sticky elements are very useful for blogs. They stay in the same place even on scroll and make it easy for users to navigate across articles. That’s why in most blogs sidebar and navigation bar are sticky.

In this article, I’m going to show you how to make any elements/blocks sticky with the vanilla-sticky JavaScript library without using third-party libraries such as jQuery or Bootstrap. Let’s get started.

How to use it:

1. Install and import the Vanilla-Sticky.

# NPM
$ npm i @uvarov.frontend/vanilla-sticky

import VanillaSticky from '@uvarov.frontend/vanilla-sticky';

2. Or load the Vanilla-Sticky JavaScript in the document.

<script>var exports = {};</script>
<script src="./js/modules/vanilla-sticky.js"></script>

3. Initialize the Vanilla-Sticky on the element which should be sticky.

var contentSticky = new VanillaSticky({
    HTMLElement: document.querySelector('.sticky-content'),
    // options here
});
contentSticky.init();

4. Determine which position the element sticks to. Default: auto.

var contentSticky = new VanillaSticky({
    HTMLElement: document.querySelector('.sticky-content'),
    position: 'top', // or 'bottom'
});
contentSticky.init();

5. Determine whether to refresh the library on window resize. Default: true.

var contentSticky = new VanillaSticky({
    HTMLElement: document.querySelector('.sticky-content'),
    resize: false,
});
contentSticky.init();

6. Set the top/bottom indents.

var contentSticky = new VanillaSticky({
    HTMLElement: document.querySelector('.sticky-content'),
    indents: {
      top: 70,
      bottom: 10
    }
});
contentSticky.init();

var contentSticky = new VanillaSticky({
    HTMLElement: document.querySelector('.sticky-content'),
    resize: false,
});
contentSticky.init();

7. Determine whether to stretch the content to the full height of the screen minus the indents if the content is less than the height of the screen. Default: true.

var contentSticky = new VanillaSticky({
    HTMLElement: document.querySelector('.sticky-content'),
    stretch: false,
});
contentSticky.init();

8. Disable the Sticky behavior on specified screen sizes.

var contentSticky = new VanillaSticky({
    HTMLElement: document.querySelector('.sticky-content'),
    window: {
      min: 640,
      max: 1440,
    }
});
contentSticky.init();

9. Update options dynamically.

sidebar.position = 'bottom';
// ...
sidebar.update();

Changelog:

06/16/2022

• v1.0.0