Make things get sticky …in a good way

StickyBits 🍬

Stickybits is a lightweight (<2KB) alternative to position: sticky polyfills that works perfectly for things like sticky headers.

Stickybits is awesome because:

• it loosely mimics position: sticky to consistently stick elements vertically across multiple platforms
• does not have the jumpiness that plugins that are built around position: fixed have because it tries to support position: fixed first.
• it is super simple & lightweight (2kb minified)

Installation   Setup   Usage   Options   Examples   Notes

Installing from a package manager

yarn

yarn add stickybits

npm

npm install stickybits --save

bower

bower install stickybits --save

Setup

Add dist/stickybits.min.js.

Basic Usage

stickybits('selector');

By default a selected stickybits element will:

• Stick elements to the top of the viewport when scrolled to vertically.
• Stick elements at the bottom of their parent when scrolled past.

CSS Class Usage

3 CSS classes will be added or removed by stickybits unrelated to the basic usage.

• js-is-sticky if the selected element is sticky.
• js-is-stuck if the selected element is stopped at the bottom of its parent.
• js-stickybit-parent so that styles can easily be added to the parent of a Stickbit

Options

Vertical Layout Position

By default, a StickyBit element will stick to the top of the viewport when vertically scrolled to.

To have a StickyBit not have the inline css property top style:

stickybits('selector', {customVerticalPosition: true});

StickyBit Sticky Offset

By default, a StickyBit element will have a 0px sticky layout offset. This means that if the element will sticky to the top of the viewport by default.

To have a stickyBit stick with a 20px offset to its vertical layout position:

stickybits('selector', {stickyBitStickyOffset: 20});

Examples

• Basic Usage
• Basic usage but with multiple instances of the same selector
• Custom vertical top offset ie: stickybits('selector', {stickyBitStickyOffset: 20})
• Custom vertical position ie: stickybits('selector', {customVerticalPosition: true})
• As a jQuery or Zepto Plugin ie: $('selector').stickybits();

Notes

We strayed away from calling Stickybits a Shim or Polyfill for position: sticky because full support would require more code. This plugin simply makes elements vertically sticky very similarly to position: sticky. Read more about position sticky here or follow it's browser implementation here.

This plugin was heavily influenced by Filament Group's awesome Fixed-sticky jQuery plugin.