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
$ 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
stickybits('selector');

// jQuery
$('selector').stickybits();

3. Possible options with default values.

$('selector').stickybits({
  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

Website: https://dollarshaveclub.github.io/stickybits/

---

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