Lightweight CSS Position:sticky Polyfill - stickybits

File Size: 44.6 KB
Views Total: 2789
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Lightweight CSS Position:sticky Polyfill - stickybits

stickybits is a CSS position:sticky polyfill that allows to fix any element to the top of the webpage, with a position:fixed fallback for legacy browser. Can be implemented in either jQuery or vanilla JavaScript.

How it works:

  • Add the CSS class '.js-is-sticky' to the desired element when it becomes sticky at the top of the webpage.
  • Stick the element to the bottom of its parent element when you scroll past it.

Install it via package managers:

# Yarn
yarn add stickybits

$ npm install stickybits

# Bower
$ bower install stickybits

How to use it:

1. Add the main JavaScript file stickybits.js (Vanilla JavaScript) or jquery.stickybits.js (jQuery) to your html page.

<!-- Vanilla JavaScript -->
<script src="stickybits.min.js"></script>

<!-- jQuery -->
<script src="jQuery.min.js"></script>
<script src="jquery.stickybits.min.js"></script>

2. Initialize the stickybits plugin on an element you specify.

// Vanilla JavaScript

// jQuery

3. Possible options with default values.

  scrollTarget: window
  stickyBitStickyOffset: 0,
  verticalPosition: top,
  useStickyClasses: false

4. Style the element & its parent container depending on the 'sticky' state.

.js-is-sticky {

.js-is-stuck {

.js-stickybit-parent {

About author:

Author: Jeffry Wainwright


This awesome jQuery plugin is developed by dollarshaveclub. For more Advanced Usages, please check the demo page or visit the official website.