Highly Customizable jQuery Sticky Element Plugin - hc-sticky

Highly Customizable jQuery Sticky Element Plugin - hc-sticky

hc-sticky is a simple, responsive, cross-browser jQuery 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 and the jQuery 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.

$('#nav').hcSticky();

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
  className: 'sticky',
  // Classname of wrapper
  wrapperClassName: 'wrapper-sticky',
  // Element that represents the reference for height instead of height of the container. recalculate
  stickTo: null,
  // recalculate and reposition the sticky element on window resize
  responsive: true,
  // When set to false, sticky content will not move with the page if it is bigger that Window.
  followScroll: true,
  // Set resolutions at which HC-Sticky will turn itself off. 
  // If integer is negative, it will turn off below given resolution, if positive it will turn off above it. 
  // Example: [-780, 1600]
  offResolutions: null
  
});

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. API methods.

// stop the sticky
$('#nav').hcSticky('stop');
// turn off the sticky
$('#nav').hcSticky('off');
// turn on the sticky
$('#nav').hcSticky('on');
// reinit the plugin
$('#nav').hcSticky('reinit');
// destroy the plugin
$('#nav').hcSticky('destroy');

Change log:

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.

  • Publication date: 29.11.2017
  • Source