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

File Size: 48.4 KB
Views Total: 1667
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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=""></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.


4. Default plugin settings.


  // 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:


  • 3.0.2: cleanup


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


  • 2.2.5: fixWidth option is back


  • bugfix

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