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)
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)