klihelp/sticky-events

Events for `position: sticky`

Sticky Events

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

Events

The StickyEvent constant has our event names:

• StickyEvent.CHANGE Fired when an element becomes stuck or unstuck
• StickyEvent.STUCK Fired only when an element becomes stuck
• StickyEvent.UNSTUCK Fired only when an element becomes unstuck

See the Javascript section of Usage for examples.

Browser support

IE / Edge	Firefox	Chrome	Safari	Opera
No IE / Edge 16+	55+	56+	Polyfill	43+

Relies on position: sticky and IntersectionObserver support.

import { observeStickyEvents, unobserveStickyEvents, StickyEvent } from 'sticky-events';

Installation

npm install sticky-events --save

Usage

View demo

HTML

<div>
    <h2 class="sticky-events">Sticky Heading 1</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
    <h2 class="sticky-events">Sticky Heading 2</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
    <h2 class="sticky-events">Sticky Heading 3</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
    <h2 class="sticky-events">Sticky Heading 4</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
    <h2 class="sticky-events">Sticky Heading 5</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

CSS

/* Import or copy the styles into your code */

@import "~sticky-events/sticky-events.css";

Javascript

import { observeStickyEvents, unobserveStickyEvents, StickyEvent } from "sticky-events";


// Add listeners to all `.sticky-events` elements on the page

observeStickyEvents();


// Events are dispatched on elements with the `.sticky-events` class

const stickies = Array.from(document.querySelectorAll('.sticky-events'));

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

  sticky.addEventListener(StickyEvent.STUCK, (event) => {
    console.log('stuck');
  });

  sticky.addEventListener(StickyEvent.UNSTUCK, (event) => {
    console.log('unstuck');
  });
});


// After you're all done with your stickies, you can clean them up

unobserveStickyEvents();