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.
Must Read: Simple and Easy jQuery to Make Any HTML Element Sticky on Scroll | jquery.sticky.js
Sticky Element Plugin With JavaScript
Post Name | Sticky Element Plugin |
Author Name | somewebmedia |
Category | Scrolling, Sticky |
Official Page | Click Here |
Official Website | github.com |
Publish Date | August 20, 2020 |
Last Update | August 25, 2023 |
Download | Link Below |
License | MIT |
How to make use of it:
Install & Import.
# NPM $ 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 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 strategies.
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();
Options
HC Sticky has a wide range of options you can set to have full control over the sticky elements.
Must Read: JavaScript Library To Create Sticky Header & Footer On Scroll | titleBarJs
Property | Default | Type | Description |
---|---|---|---|
top | 0 | int | The distance from the top of the Window at which to trigger HC-Sticky. |
bottom | 0 | int | The distance from the bottom of the Window at which to attach HC-Sticky. |
innerTop | 0 | int | The distance from the top inside of the sticky element at which to trigger HC-Sticky. |
innerSticker | null | string/element object | The element inside of the sticky element at which to attach HC-Sticky. This has a higher priority than innerTop option. |
bottomEnd | 0 | int | The distance from the bottom of the referring element at which to stop HC-Sticky. |
stickTo | null (parent element) | string/element object | The element that represents the reference for height instead of the height of the container. |
followScroll | true | boolean | When set to false , sticky content will not move with the page if it is bigger than the Window. |
stickyClass | ‘sticky’ | string | HTML class that will be applied to the sticky element while it is attached. |
responsive | null | object | An object containing responsive breakpoints, on which you can tell HC Sticky what to do. |
mobileFirst | false | boolean | The direction of the responsive queries. |
disable | false | boolean | Disable the plugin. Usually used with responsive objects. |
onStart | null | function | The callback function fired when the element becomes attached. |
onStop | null | function | The callback function is fired when the element stops floating. |
onBeforeResize | null | function | The callback function fired before the sticky has been resized (happens after the Window resizes and before the sticky reinit). |
onResize | null | function | The callback function fired after the sticky has been resized (happens after Window resizes and the sticky reinit). |
resizeDebounce | 100 | int | Limit the rate at which the HC Sticky can fire on window resize. |
Methods
Methods are used to control the plugin after initialization.
Must Read: In-Page JavaScript Sticky Navigation Plugin | Navigator.js
Method | Accepts | Description |
---|---|---|
options | string | Returns current settings, or a specific setting if you specify it. |
update | object | Updates the settings with the new ones. |
refresh | N/A | Recalculates sticky size and position. Useful after altering DOM elements inside sticky. |
detach | N/A | Detaches the HC-Sticky from the element, preventing it from running. |
attach | N/A | Attaches the HC-Sticky back to the element. |
destroy | N/A | Completely destroys HC-Sticky and reverts the element to the original state. |
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.