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