Highly Customizable jQuery Sticky Element Plugin - hc-sticky

hc-sticky is a simple, responsive, cross-browser jQuery & Vanilla JS plugin which makes any block elements (e.g. navigation menu, sidebar) floating / fixed when scrolling, with lots of customization options and API.

The plugin has been completely re-written to be a standalone JavaScript plugin. Read the Cross-browser Sticky Element Plugin With Pure JavaScript for more information.

How to use it:

1. To get started, include jQuery library (OPTIONAL) and the hc-sticky plugin right before the closing body tag.

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

2. Call the plugin on the desired element and you're done.

// As a jQuery Plugin
$('#nav').hcSticky({
  // options
});

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

3. All default customization options.

$('#nav').hcSticky({

  // 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 element gets fixed.

$('#nav').hcSticky({

  onStart: function(){
    // ...
  }

});

5. Execute a function when the element stops floating.

$('#nav').hcSticky({

  onStop: function(){
    // ...
  }

});

6. Execute callback functions before & after resize.

$('#nav').hcSticky({

  onBeforeResize: function(){
    // ...
  },

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

});

7. API methods.

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

// recalculates sticky size and position
$('#nav').hcSticky('refresh');

// attaches the sticky
$('#nav').hcSticky('attach');

// detaches the sticky
$('#nav').hcSticky('detach');

// destroy the plugin
$('#nav').hcSticky('destroy');

Changelog:

v2.2.7 (2021-06-08)

• Updated

v2.2.6 (2020-08-20)

• Updated

v2.2.5 (2020-08-19)

• Updated

v2.2.4 (2020-08-18)

• Updated

v2.2.3 (2019-07-30)

• Updated

v2.0.0 (2018-06-28)

• Works as a vanilla JavaScript plugin

2017-12-01

• Added browserify demo

2017-11-29

• Completely re-written to be standalone plugin. Read the Cross-browser Sticky Element Plugin With Pure JavaScript for more information.

 

---

This awesome jQuery plugin is developed by somewebmedia. For more Advanced Usages, please check the demo page or visit the official website.