Cross-browser Sticky Element Plugin With Pure JavaScript – HC-Sticky

Category: Javascript , Recommended | September 22, 2018
Author: somewebmedia
Views Total: 2,154
Official Page: Go to website
Last Update: September 22, 2018
License: MIT

Preview:

Cross-browser Sticky Element Plugin With Pure JavaScript – HC-Sticky

Description:

This is a pure JavaScript version of the hc-sticky jQuery plugin which makes any element sticky on the top of the web page using pure JavaScript.

How to use it:

Install & Import.

# NPM
$ npm install hc-sticky --save
import hcSticky from 'hc-sticky';

Or include the compiled JavaScript file ‘hc-sticky.js’ on the webpage.

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

Initialize the library and specify the element to be stuck.

var Sticky = new hcSticky('#sidebar', {
    // options here
});

All possible plugin options.

var Sticky = new hcSticky('#sidebar', {
    top: 0,
    bottom: 0,
    bottomEnd: 0,
    innerTop: 0,
    innerSticker: null, // Element inside of the sticky element at which to attach HC-Sticky. 
    stickyClass: 'sticky',
    stickTo: null, // Element that represents the reference for height instead of height of the container.
    followScroll: true,
    queries: null, // Object containing responsive breakpoints.
    queryFlow: 'down',
    responsive: null, // Object containing responsive breakpoints
    mobileFirst: false, // Direction of the responsive queries.
    onStart: null,
    onStop: null,
    onBeforeResize: null,
    onResize: null,
    resizeDebounce: 100,
    disable: false
});

API methods.

var Sticky = new hcSticky('#sidebar');

// updates options
Sticky.update({
  // options here
});

// re-init the plugin
Sticky.reinit();

// Detaches the plugin from element
Sticky.detach();

// Attaches the plugin back to the element.
Sticky.attach();

// Destroys the plugin
Sticky.destroy();

Changelog:

v2.2.3 (09/22/2018)

  • Update

You Might Be Interested In:


Leave a Reply