Cross-browser jQuery Position: Sticky Plugin/Polyfill - i-sticky

i-sticky is a jQuery sticky element plugin/polyfill for adding the position:sticky feature to web browsers which do not support the native CSS position:sticky property.

How to use it:

1. Include both jQuery library and the jQuery i-sticky plugin at the bottom of your webpage.

<script src="http://code.jquery.com/jquery-1.12.2.min.js"></script>
<script src="/path/to/i-sticky.js"></script>

2. Make your element sticky on vertical page scrolling using the CSS position:sticky property.

<div class="i-sticky">Sticky Element</div>

.i-sticky {
  position: -webkit-sticky;
  position: sticky;
}

3. Initialize the plugin with all default settings. By default, the plugin automatically disables itself if native position:sticky support is detected in your browser.

$('.i-sticky').iSticky();

4. Default plugin settings.

$('.i-sticky').iSticky({

  // CSS class for the placeholder element
  holderClass : 'i-sticky__holder',

  // recalculate placeholder's height
  holderAutoHeight : true,

  // debug mode
  debug : false,

  // copies parent's width
  fixWidth : false,

  // applies the plugin even if the browser has native position:sticky support
  force: false

});

Change logs:

2017-09-09

• 3.0.2: cleanup

2016-11-13

• 3.0.0: position:static in home state (was position:relative). fixWidth is enabled by default

2016-11-12

• 2.2.5: fixWidth option is back

2016-11-08

• bugfix

---

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