A CSS Position:Sticky Property Polyfill – StickyState

Preview:

Description:

StickyState is a lightweight JavaScript library used to polyfill CSS Position:Sticky property for browsers without native support. In addition, it allows to add custom CSS classes to the element when it reaches the top of the webpage.

How to use it:

Load the JavaScript library stickystate.js in the webpage when needed.

<script src="dist/stickystate.js"></script>

Fix an element to the top of a specific container.

<div class="container">
  <div class="top sticky" id="top-a">
    Fixed to viewport top A.
  </div>
</div>

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
}
.sticky.sticky-fixed.is-sticky {
  position: fixed;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.sticky.sticky-fixed.is-absolute{
  position: absolute;
}

Active the Position:Sticky polyfill for all browsers.

var StickyState = require('sticky-state');
new StickyState(yourElement);
// or for all elements with class .sticky
StickyState.apply(document.querySelectorAll('.sticky'));
// for example

Available options with default values.

var defaults = {
  disabled: false,
  className: 'sticky',
  fixedClass: 'sticky-fixed',
  stateClassName: 'is-sticky'
};