Highly Customizable Sticky Element Plugin With JavaScript | HC-Sticky

Sticky JS Library is a JavaScript library that makes any element on your page visible while scrolling. Dependency is free, but it also works as a jQuery plugin.

This is a pure JavaScript version of the hc-sticky jQuery plugin which makes any factor sticky on the highest of the online web page utilizing pure JavaScript.

How to make use of it:

Install & Import.

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

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

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

Initialize the library.

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

All possible plugin choices.

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 strategies.

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

Make Element Sticky on Scroll CSS, Cross-browser Sticky Element Plugin, Javascript Sticky Element on Scroll

See Demo And Download

Official Website(somewebmedia): Click Here

This superior jQuery/javascript plugin is developed by somewebmedia. For extra Advanced Usage, please go to the official website.