- Google's example is too complex
- Observing the exact point an element will start sticking allows for greater control
- Window scroll event fires too many times to count.
- Container-less (supports any element position)
I intend to make this class more modular, abstracting into helper functions and allowing for passing in elements. React hook version is also intended (using the future modular build). Also a more performant observation technique.
- Use Houdini CSSOM for sentinel
- Modular
- React hooks
- Multi element / selector support
// Vanilla TS
const emitter = createStickyEmitter(...elements | selector | element);
emitter.listen();
() => emitter.dispose();
const stickyElement = document.querySelector("header");
header.addEventListener("sticky-change", () => {
// handle sticky event
})
// React TS
const [sticky, ref] = useStickyEvent(); // Uses vanilla TS under the hood
() => {
return <header style={{borderBottom: sticky ? "1px solid blue" : undefined}} ref={ref} />
}