Sticky Any Element Plugin with jQuery

A simple and easy-to-use jQuery Plugin that makes it easy to make any element on your page follow the user down the page as they scroll.

How to use it:

1. Include jQuery Library and sticky.js

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.sticky.js"></script>

2. Call the plugin

<script>
$(window).load(function(){
$("#sticker").sticky({ topSpacing: 0, center:true, className:"hey" });
});
</script>

3. The basic Markup

<div id="sticker">
<p> sticky content</p>
</div>

4. All possible plugin options.

$("#sticker").sticky({ 
  topSpacing: 0,
  bottomSpacing: 0,
  className: 'is-sticky',
  wrapperClassName: 'sticky-wrapper',
  center: false,
  getWidthFrom: '',
  widthFromWrapper: true, // works only when .getWidthFrom is empty
  responsiveWidth: false,
  zIndex: 'inherit'
});

Change log:

2017-05-11

• Subtract element padding in getWidthFrom.

---

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