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="//code.jquery.com/jquery.min.js"></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
$('#nav').hcSticky({
  // options
});

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

3. All default customization choices.

$('#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 aspect will get fastened.

$('#nav').hcSticky({
  onStart: function(){
    // ...
  }
});

5. Execute a function when the aspect stops floating.

$('#nav').hcSticky({
  onStop: function(){
    // ...
  }
});

6. Execute callback features earlier than & after resize.

$('#nav').hcSticky({
  onBeforeResize: function(){
    // ...
  },
  onResize: function(){
    // ...
  }
});

7. API strategies.

// 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');

Highly Customizable jQuery Sticky Element Plugin, HC-Sticky Github

See Demo And Download