A CSS Position:Sticky Property Polyfill – StickyState

Category: Javascript , Recommended | March 26, 2016
Views Total:514 views
Official Page:Go to website
Last Update:March 26, 2016


A CSS Position:Sticky Property Polyfill – StickyState


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.
.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;
  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
// for example

Available options with default values.

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

You Might Be Interested In:

Leave a Reply