Pure JavaScript Position: sticky Polyfills – stickybits

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

Preview:

Pure JavaScript Position: sticky Polyfills – stickybits

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

You Might Be Interested In:


Leave a Reply