Skip to content

Latest commit

 

History

History
43 lines (35 loc) · 1.3 KB

README.md

File metadata and controls

43 lines (35 loc) · 1.3 KB
Raw

sticky-change

NPM Package Build Size

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)