Sticky scroll-aware nav

Header is transparent over the hero, then turns solid dark on scroll. The standard premium-site nav pattern.

Navigation Built Tiny JS

Use when — your hero is dark/visual and you want the nav to feel like part of the hero atmosphere, then become readable backdrop once the user is reading content below.

Live demo

Scroll inside the dark frame below. (Hover the frame to simulate scroll on this static preview.)

Brand

Projects About Contact

Hero (transparent nav over me)

Scrolled-into section (nav now solid dark)

The key bits

header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  transition: background 0.25s ease;
}
header.site.scrolled {
  background: #0d0d0b;
}

The 10-line JS

const header = document.querySelector('header.site');
window.addEventListener('scroll', () => {
  header.classList.toggle('scrolled', window.scrollY > 30);
}, { passive: true });

{ passive: true } is critical — without it the scroll listener can jank the page on mobile.

Code playbook: vault/Topics/web-patterns.md § Pattern 2 (Sticky header with scroll-aware background).