Natural Sticky: a tiny JavaScript library for creating hide-on-scroll headers and footers that feel incredibly smooth.
Instead of using jarring animations, it lets the browser's native scroll do the work, so the element moves naturally with your scroll speed.
Ultra-lightweight (1.1KB)
Zero dependencies
Framework-agnostic (React, Vue, etc.)
Less distracting for users
It's a great alternative to libraries like Headroom.js if you want a more organic feel.
Top comments (3)
Thanks a lot for writing about natural-sticky 🙌
I really appreciate you taking the time to highlight the project.
Just to add a small note: the effect tends to feel even more natural on touch-enabled devices (phones, tablets, etc.). To give desktop users a similar experience, I also put together demo pages with a drag-to-scroll effect, so it’s easier to see how it behaves.
Since the package is super lightweight (only ~1.1 KB, no dependencies, framework-agnostic), I hope it can be useful for anyone who needs a smooth hide-on-scroll behavior without the usual animation thresholds and tuning headaches.
Nice Work,
Does it handle complex layouts with multiple sticky elements, or is it best suited for single header/footer use cases?
Yes – it handles both!
Since v1.3.0 Natural‑Sticky supports animating any number of sticky/ floating elements on the same page (headers, footers, floating buttons, sidebars, etc.) without layout conflicts. The “floating” mode switches to
fixed/absolutepositioning, so each element works independently while still benefitting from the natural scroll‑driven hide/show behavior.If you need a single header/footer only, it works just as well; if you have a complex layout with several sticky pieces, they’ll all cooperate seamlessly.
🔗 Demo: github.kadykov.com/natural-sticky/...
Feel free to try it out and let me know if you run into any edge‑case scenarios!