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

Category: Javascript , Recommended | August 20, 2020
Views Total:1,342 views
Official Page:Go to website
Last Update:August 20, 2020


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


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 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', {
    // The distance from the top
    top: 0,
    // The distance from the bottom
    bottom: 0,
    // The distance from the bottom of the referring element
    bottomEnd: 0,
    // The distance from the top inside of the sticky content
    innerTop: 0,
    // Element at which to trigger HC-Sticky instead of top of sticky container. 
    // This has higher priority than innerTop option.
    innerSticker: null,
    // Classname of sticky element
    stickyClass 'sticky',
    // Classname of wrapper
    wrapperClassName: 'wrapper-sticky',
    // Element that represents the reference for height instead of height of the container. recalculate
    stickTo: null,
    // Object containing responsive breakpoints
    responsive: null,
    // When set to false, sticky content will not move with the page if it is bigger that Window.
    followScroll: true,
    // Direction of the responsive queries.
    mobileFirst: true,
    // Limit the rate at which the HC Sticky can fire on window resize.
    resizeDebounce: 100,
    // Disable the plugin
    disable: false
    // Callbacks
    onStart: null,
    onStop: null,
    onBeforeResize: null,
    onResize: null

API methods.

var Sticky = new hcSticky('#sidebar');
// updates options
  // options here
// re-init the plugin
// Detaches the plugin from element
// Attaches the plugin back to the element.
// Destroys the plugin


v2.2.6 (08/20/2020)

  • Update

v2.2.5 (08/19/2020)

  • Update

v2.2.4 (08/18/2020)

  • Update

v2.2.3 (09/22/2018)

  • Update

You Might Be Interested In:

Leave a Reply