Pure JavaScript Position: sticky Polyfills – stickybits

Category: Javascript , Recommended | October 5, 2018
Author: dollarshaveclub
Views Total: 2,391 views
Official Page: Go to website
Last Update: October 5, 2018
License: MIT


Pure JavaScript Position: sticky Polyfills – stickybits


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


# Yarn
yarn add stickybits

$ 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.


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


  // 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



  • v3.5.6

You Might Be Interested In:

Leave a Reply