https://github.com/tobyzerner/sticky-observer

Observe when sticky elements become stuck and unstuck.
https://github.com/tobyzerner/sticky-observer

Last synced: 26 days ago
JSON representation

Observe when sticky elements become stuck and unstuck.

• Host: GitHub
• URL: https://github.com/tobyzerner/sticky-observer
• Owner: tobyzerner
• License: mit
• Created: 2022-01-30T22:02:36.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2024-01-17T00:24:06.000Z (11 months ago)
• Last Synced: 2024-11-16T07:25:19.007Z (about 1 month ago)
• Language: HTML
• Size: 148 KB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Sticky Observer

**Observe when `position: sticky` elements become stuck and unstuck.**

Sets up an `IntersectionObserver` for the sticky element, using negative `rootMargin` values so that when the element reaches its sticky position, the observer will see the bounding box as being slightly off-screen.

![npm bundle size](https://img.shields.io/bundlephobia/minzip/sticky-observer)

## Installation

```

npm install sticky-observer --save

```

## Usage

```ts

import StickyObserver from 'sticky-observer';

// Construct the observer by passing the element to watch, and a

// callback to be run whenever the element becomes stuck or unstuck.

const observer = new StickyObserver(el, (stuck) => {

    el.classList.toggle('is-stuck', stuck);

});

```

### Options

You can pass options as the third argument:

```ts

const observer = new StickyObserver(el, callback, {

    // The element that is used as the viewport for checking the state of the

    // element. Defaults to the browser viewport if not specified.

    root: document,

});

```

### Methods

```ts

// Start observing the element. This is called automatically when the observer is

// constructed, so there's no need to call it again, unless you've stopped the

// observer previously. You can also call it to recalibrate the observer if you

// know that the element's sticky offset has changed.

observer.start();

// Stop observing the element.

observer.stop();

```

## Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

## License

[MIT](LICENSE)