Sticky-change NPM

sticky-change

watching HTMLElement's sticky state, without scroll events.

play on stackblitz (a bug from stackblitz, when in build-in browser, can not use IntersectionObserver API normally, so just click open in new window)

Demo

Usage

pure

<head>
    <script src="./dist/index.js"></script>
</head>
<div id="page-title" style="position: sticky; top: 30px">Page Title</div>
<script>
    new WatchSticky(
            document.getElementById('page-title'), 
            null, 
            () => {
                document.getElementById('page-title').classList.toggle('shadow', true)
            },
            () => {
                document.getElementById('page-title').classList.toggle('shadow', false)
            }
    )
</script>

npm

npm i sticky-change

import {WatchSticky} from 'sticky-change'

new WatchSticky(ref, null, stickyCb, unstickyCb)

@everything-registry/sub-chunk-2827 @infinitebrahmanuniverse/nolb-sti

2 years ago

2 years ago

2 years ago