A CSS Position:Sticky Property Polyfill – StickyState

Category: Javascript , Recommended | March 26, 2016
Author: soenkekluth
Views Total: 2,382
Official Page: Go to website
Last Update: March 26, 2016
License: MIT

Preview:

A CSS Position:Sticky Property Polyfill – StickyState

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'
};

You Might Be Interested In:


Leave a Reply