Highly Customizable jQuery Sticky Element Plugin - hc-sticky

Highly Customizable jQuery Sticky Element Plugin - hc-sticky
File Size: 94.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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
  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
  
});

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.1 (2018-06-28)

  • Works as a vanilla JavaScript plugin

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.