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 over scroll distance.

And this line controls when the animation plays:

animation-range: 0px 150px;

Meaning the animation completes within the first 150px of scrolling.

---

☐ Why This Matters for Modern UI

Using CSS instead of JavaScript for UI behavior means:

• fewer scroll listeners
• cleaner code
• smoother rendering
• better performance

Especially useful when building UI systems in React or other frameworks.

---

☐ Demo

I built a small demo to show this effect.

---

Small CSS features like this are quietly changing how we build modern interfaces.

Sometimes the best optimization is simply:

removing JavaScript completely.

---

Hashtags:

css #frontenddeveloper #webdev #animation #devtips #programming