Add dist/stickybits.min.js . You have access to the API options below and must invoke scrollDir. See the Default Setup Usage and Options below.

Default Usage

Basic Setup

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.

Key Note: Stickybits expects and works best when the element that will become sticky is wrapped within a parent element that defines when the element starts being sticky and stops being sticky. See below for visual reference.

<main id="some-stickybit-parent"><nav id="some-stickybit-nav"></nav></main></code></pre>

useStickyClasses Feature

Stickybits allows costumers to add CSS to elements when they become sticky and when they become stuck at the bottom of their parent element.

By default, if position: sticky is supported, StickyBits will exit allowing the browser to manage stickiness and avoid adding a scroll event listener.

If the useStickyClasses argument is set to true then even if a browser supports position: sticky , StickyBits will still add a scroll event listener to add and remove sticky CSS Classes. This option is available so that CSS styles can use when StickyBits elements become sticky or stuck at the bottom of their parent.

To use useStickyClasses :

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

Then, in css you can do:

.some-sticky-element .js-is-sticky { background-color: red; }

.some-sticky-element .js-is-stuck { background-color: green; }

View add css classes for more information on StickyBits CSS Classes