CSS-Only Slide-In Sticky Navbar — No JavaScript Needed

Modern CSS scroll-driven animation that many developers still don’t use. ☐ Can a Sticky Navbar Slide In on Scroll Without JavaScript? Most developers implement scroll-based UI behavior using JavaScript. Something like this: window.addEventListener("scroll", () => { if (window.scrollY > 100) { navbar.classList.add("visible") } }) It works. But modern CSS can actually do this without JavaScript. ☐ The Modern CSS Way CSS now supports scroll-driven animations. You can connect animation progress directly to the page scroll. .main-header { position: sticky; top: 0; animation: slide-down auto linear both; animation-timeline: scroll(); animation-range: 0px 150px; } @keyframes slide-down { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } Now the navbar slides in as the user scrolls. No JavaScript required. ☐ What Many Developers Miss The key property here is: animation-timeline: scroll(); Instead of running over time, the animation runs ove