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.

Must Read: Simple and Easy jQuery to Make Any HTML Element Sticky on Scroll | jquery.sticky.js

Sticky Element Plugin With JavaScript

Post NameSticky Element Plugin
Author Namesomewebmedia
CategoryScrolling, Sticky
Official PageClick Here
Official Websitegithub.com
Publish DateAugust 20, 2020
Last UpdateAugust 25, 2023
DownloadLink Below
LicenseMIT

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

PropertyDefaultTypeDescription
top0intThe distance from the top of the Window at which to trigger HC-Sticky.
bottom0intThe distance from the bottom of the Window at which to attach HC-Sticky.
innerTop0intThe distance from the top inside of the sticky element at which to trigger HC-Sticky.
innerStickernullstring/element objectThe element inside of the sticky element at which to attach HC-Sticky. This has a higher priority than innerTop option.
bottomEnd0intThe distance from the bottom of the referring element at which to stop HC-Sticky.
stickTonull (parent element)string/element objectThe element that represents the reference for height instead of the height of the container.
followScrolltruebooleanWhen set to false, sticky content will not move with the page if it is bigger than the Window.
stickyClass‘sticky’stringHTML class that will be applied to the sticky element while it is attached.
responsivenullobjectAn object containing responsive breakpoints, on which you can tell HC Sticky what to do.
mobileFirstfalsebooleanThe direction of the responsive queries.
disablefalsebooleanDisable the plugin. Usually used with responsive objects.
onStartnullfunctionThe callback function fired when the element becomes attached.
onStopnullfunctionThe callback function is fired when the element stops floating.
onBeforeResizenullfunctionThe callback function fired before the sticky has been resized (happens after the Window resizes and before the sticky reinit).
onResizenullfunctionThe callback function fired after the sticky has been resized (happens after Window resizes and the sticky reinit).
resizeDebounce100intLimit 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

MethodAcceptsDescription
optionsstringReturns current settings, or a specific setting if you specify it.
updateobjectUpdates the settings with the new ones.
refreshN/ARecalculates sticky size and position. Useful after altering DOM elements inside sticky.
detachN/ADetaches the HC-Sticky from the element, preventing it from running.
attachN/AAttaches the HC-Sticky back to the element.
destroyN/ACompletely destroys HC-Sticky and reverts the element to the original state.

See Demo And Download

Sticky-Element-Plugin

Official Website(somewebmedia): Click Here

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

Related Posts

Data-Table-Generator-Tabulator

Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…

alert-confirm-prompt-attention-js

Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…

Bootstrap-4-Sidebar-Menu-Responsive-Template

Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…

Bootstrap-4-Toast-Notification-Plugin

Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…

Audio-Visualizations-Wave

How to Create Audio Visualizations with JavaScript | Wave.js

Audio Visualizer Library – wave.js is a vanilla javascript audio visualization library that provides 20+ creative audio visualization effects to bring more engagement to your visitor. Contribute…

bootstrap-5-treeview

Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview

Bootstrap 5 Tree View is a very simple plug-in for creating a basic and elegant Treeview using BS5. For use with Bootstrap 5, the attributes have been…

Leave a Reply

Your email address will not be published. Required fields are marked *