/i-sticky

jQuery plugin for position:sticky emulation

Primary LanguageHTMLMIT LicenseMIT

i-sticky

"position: sticky" jQuery plugin / polyfill. Takes use of the BEM-notation by default. Based on position--sticky- polyfill by Matthew Phillips.

Limitations

  • only vertical direction is supported
  • if native position:sticky support is detected, the plugin does nothing
  • you shouldn't set left or right CSS properties on sticky positioned element
  • you should set top, bottom or margin-left properties in pixels only
  • parent block of position:sticky element MUST have position different from static (f.e., relative is a good choice)

Usage

jQuery is required (tested with 1.8.3, should work with 1.7.0 or newer). Then write some JS:

$('.i-sticky').iSticky({
    holderClass:      'i-sticky__holder',
    holderAutoHeight: false
});

You should write CSS rules by yourself, as you normally would. For example:

/* sticky element */
.i-sticky {
    position: relative;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 30px;
}
/* it's placeholder, generated by plugin */
.i-sticky + .i-sticky__holder {
    height: 30px;
}
/* don't forget to change positioning of parent element */
.some-sticky-parent {
    position: relative;
}

Methods

Remove sticky style

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

Configuration

  • holderClass contains className for the placeholder element, that is created to hold original element's place. Default value is i-sticky__holder
  • holderAutoHeight when set true, the plugin will recalculate placeholder's height. Otherwise, your CSS should define it. Defaults to false.

License

MIT

Examples

REG.COM domain checker

Changelog

2014-10-08 1.0.0