Pure JavaScript Position: sticky Polyfills – stickybits

Preview:

Description:

A JavaScript only CSS position: sticky Polyfill that makes any elements sticky on the top (and even bottom) of the screen when scrolling down.

Installation:

# Yarn
yarn add stickybits
# NPM
$ npm install stickybits
# Bower
$ bower install stickybits

How to use it:

Import the stickybits into your project.

<script src="dist/stickybits.min.js"></script>

Create a new stickybits object and specify the element to be stuck at the top of the window on vertical page scrolling.

stickybits('selector');

Config the stickybits. You can pass the following options as the second parameter to the ‘stickybits’ object:

stickybits('selector',{
  // the scroll duration for when .js-is-sticky--change is added
  customStickyChangeNumber: null,
  // without inline styles except for position: sticky or position: fixed
  noStyles: false,
  // offset in pixels
  stickyBitStickyOffset: 0,
  // custom Scroll Element
  scrollEl: window,
  // default CSS classes
  parentClass: 'js-stickybit-parent',
  stickyClass: 'js-is-sticky',
  stuckClass: 'js-is-stuck',
  stickyChangeClass: 'js-is-sticky--change',
  // use position: sticky or position: fixed
  useFixed: false,
  // or bottom
  verticalPosition: 'top',
  // add and remove sticky CSS Classes
  // .js-is-sticky and .js-is-stuck
  useStickyClasses: true,
  // to not use offsetTop
  useGetBoundingClientRect: false
  
});

Changelog:

10/05/2018

• v3.5.6