JavaScript Library That Makes Any Element on Your Page | HC-Sticky

HC-Sticky is a JavaScript library that makes any element on your page visible while scrolling. jQuery plugin.hc-sticky is a simple, responsive jQuery & Vanilla JS plugin and browser which makes any block elements (eg navigation menu and sidebar) floating/fixed on hover, with plenty of customization options and API.

jquery sticky sidebar on scroll, jquery multiple sticky header on scroll, jquery sticky js cdn, sticky sidebar js cdn, scrolling sticky sidebar, scrollable sticky sidebar

How to make use of it:

1. To get began, include a jQuery library and the hc-sticky plugin proper earlier than the closing body tag.

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

2. Call the plugin on the specified aspect and also you’re finished.

// As a jQuery Plugin
  // options

// As a Vanilla JS Plugin
var Sticky = new hcSticky('#nav', {
    // options

3. All default customization choices.


  // 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

4. Execute a function when the aspect will get fastened.

  onStart: function(){
    // ...

5. Execute a function when the aspect stops floating.

  onStop: function(){
    // ...

6. Execute callback features earlier than & after resize.

  onBeforeResize: function(){
    // ...
  onResize: function(){
    // ...

7. API strategies.

// updates settings
$('#nav').hcSticky('update', OPTIONS);

// recalculates sticky size and position

// attaches the sticky

// detaches the sticky

// destroy the plugin

Highly Customizable jQuery Sticky Element Plugin, HC-Sticky Github

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.

Related Posts


Responsive Image Gallery Lightbox jQuery Plugin | VenoBox

VenoBox is a responsive jQuery modal window plugin suitable for images, embedded content, iFrames, Google Maps, Vimeo, and YouTube videos. The big difference compared to many other…


[Animation] Bootstrap Multi-Level Responsive Dropdown Menu

Bootstrap-based multi-level dropdown navigation menu with cool animations. The dropdown on Hover is a jQuery plugin used to create Bootstrap multi-level scroll-triggered dropdown menus with CSS3 animations…


Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…


HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….


CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…

Leave a Reply

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