Sticky Events

Events for position: sticky, without the need for an onscroll listener.

Installation

$ npm install sticky-events

Browser support

| IE / Edge | Firefox | Chrome | Safari | Opera | | --------- | --------- | --------- | --------- | --------- | | No IE / Edge 16+ | 55+ | 56+ | 12.1+ | 43+ |

A Polyfill for IntersectionObserver is available here.

Options

| Option Name | Type | Default | Description | | ---------------- | ----------------------- | ---------------- | ------------------------------------------------------------------------------------------------- | | container | Element or Document | document | The element that contains your sticky elements. Grabs all sticky elements on the page by default. | | | enabled | boolean | true | Enable sticky events immediately. | | stickySelector | string | .sticky-events | The selector to use to find your sticky elements within container. |

Events

The StickyEvents class has constants we can use to listen for events.

| Event Name | Description | | ---------------------- | ---------------------------------------------- | | StickyEvents.CHANGE | Fired when an element becomes stuck or unstuck | | StickyEvents.STUCK | Fired only when an element becomes stuck | | StickyEvents.UNSTUCK | Fired only when an element becomes unstuck |

When an event is fired, the following data is available from the event.detail property:

{
  isSticky: Boolean,
  position: StickyEvents.POSITION_BOTTOM|StickyEvents.POSITION_TOP,
}

Methods

| Method Name | Arguments | Description | | ----------------- | --------------------- | --------------------------------------------------------- | | addSticky | Node or Element | Add a single sticky to the existing set of stickies | | addStickies | NodeList or array | Add a list of stickies to the existing set of stickies | | disableEvents | boolean | Stop firing events on the set of stickies. By default, this will fire a StickyEvents.UNSTUCK event on the sticky elements, resetting them to their original state. Pass false to leave the stickies alone. | | enableEvents | none | Start firing events on the set of stickies |

How to use

View demo

Given the following HTML:

<div class="my-sticky-container">
    <div>
        <h2 class="custom-sticky-selector">Sticky Heading 1</h2>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div>
        <h2 class="custom-sticky-selector">Sticky Heading 2</h2>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div>
        <h2 class="custom-sticky-selector">Sticky Heading 3</h2>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
</div>

We could configure StickyEvents like this:

import StickyEvents from 'sticky-events';


// Create new StickyEvents instance

const stickyEvents = new StickyEvents({
  container: document.querySelector('.my-sticky-container'),
  enabled: false,
  stickySelector: '.custom-sticky-selector'
});


// Enable events

stickyEvents.enableEvents();


// Add event listeners

const { stickyElements, stickySelector } = stickyEvents;

stickyElements.forEach(sticky => {
  sticky.addEventListener(StickyEvents.CHANGE, (event) => {
    sticky.classList.toggle('bg-dark', event.detail.isSticky);
  });
});


// Add stickies at some point after initialization

fetch('/api/gimme-divs')
  .then(response => response.text())
  .then(html => letsPretendToCreateADocument(html))
  .then((document) => {
    const stickies = document.querySelectorAll(stickySelector);

    stickies.forEach(sticky => {
      sticky.addEventListener(StickyEvents.CHANGE, (event) => {
        sticky.classList.toggle('bg-dark', event.detail.isSticky);
      });
    });  

    stickyEvents.addStickies(stickies);
  });

// Disable events

stickyEvents.disableEvents();