Header turns solid on scroll

The header floats transparent over the hero, then gains a white backdrop, blur and hairline once the page moves 20px.

It imports two small hooks from @/lib/motion and the colour tokens; the zip includes both.

Demo.tsx

"use client";
import { useEffect, useRef } from "react";
import styles from "./demo.module.css";

const stays = [
  { name: "Villa Azul", place: "Assagao, Goa", price: "€240" },
  { name: "Casa Mar", place: "Comporta", price: "€310" },
  { name: "Olive House", place: "Paxos", price: "€190" },
  { name: "Palm Court", place: "Galle", price: "€170" },
];

export default function Demo() {
  const root = useRef<HTMLDivElement>(null);
  const scroller = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const el = scroller.current;
    if (!el) return;
    const onScroll = () => {
      root.current!.classList.toggle(styles.solid, el.scrollTop > 20);
      if (el.scrollTop > 4) root.current!.classList.add(styles.scrolled);
    };
    onScroll();
    el.addEventListener("scroll", onScroll, { passive: true });
    return () => el.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <div ref={root} className={styles.root}>
      <div ref={scroller} className={styles.scroller} tabIndex={0} aria-label="Page preview">
        <header className={styles.header}>
          <b className={styles.brand}>Casa Mar</b>
          <nav className={styles.nav}>
            <a href="#" onClick={(e) => e.preventDefault()}>Stays</a>
            <a href="#" onClick={(e) => e.preventDefault()}>Journal</a>
            <button type="button" className={styles.cta}>Book</button>
          </nav>
        </header>
        <section className={styles.hero}>
          <h2>Slow summers by the sea</h2>
          <p>Four villas, one quiet coast.</p>
        </section>
        <section className={styles.list}>
          {stays.map((s) => (
            <article key={s.name} className={styles.card}>
              <div className={styles.thumb} />
              <div>
                <b>{s.name}</b>
                <span>{s.place}</span>
              </div>
              <span className={styles.price}>{s.price}<small> / night</small></span>
            </article>
          ))}
        </section>
      </div>
      <span className={styles.hint} aria-hidden="true">Scroll inside</span>
    </div>
  );
}

demo.module.css

.root { position: relative; width: 100%; height: 100%; background: var(--white); overflow: hidden; }
.scroller { height: 100%; overflow-y: auto; overscroll-behavior: contain; container-type: size; }
.scroller:focus-visible { outline-offset: -3px; }

.header { position: sticky; top: 0; z-index: 2; height: 56px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 20px; color: var(--white); border-bottom: 1px solid transparent; transition: background-color .25s, color .25s, border-color .25s, backdrop-filter .25s; }
.solid .header { background: color-mix(in srgb, var(--white) 86%, transparent); backdrop-filter: blur(12px); border-bottom-color: var(--line); color: var(--ink); }
.brand { font-size: 16px; letter-spacing: -0.01em; }
.nav { display: flex; align-items: center; gap: 16px; font-size: 14px; font-weight: 600; }
.nav a { text-decoration: none; }
.cta { min-height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--white); color: var(--ink); font-weight: 600; cursor: pointer; transition: background-color .25s, color .25s; }
.solid .cta { background: var(--ink); color: var(--white); }

.hero { margin-top: -56px; min-height: 78cqh; display: grid; align-content: end; gap: 6px; padding: 72px 20px 28px; color: var(--white); background: radial-gradient(circle at 78% 30%, var(--sand) 0 7%, transparent 7.5%), linear-gradient(180deg, color-mix(in srgb, var(--ink) 50%, var(--accent-text)), var(--accent-text) 70%, var(--accent)); }
.hero h2 { margin: 0; font-size: clamp(24px, 5cqw, 40px); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.hero p { opacity: .85; font-size: 15px; }

.list { display: grid; gap: 10px; padding: 20px; max-width: 640px; }
.card { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; font-size: 14px; }
.card div { display: grid; }
.card div span { color: var(--muted); font-size: 13px; }
.thumb { width: 48px; height: 48px; border-radius: 9px; background: linear-gradient(160deg, var(--sky), var(--accent-soft)); }
.card:nth-child(2) .thumb { background: linear-gradient(160deg, var(--sand), var(--accent-pale)); }
.price { font-weight: 700; font-variant-numeric: tabular-nums; }
.price small { font-weight: 400; color: var(--muted); }

.hint { position: absolute; left: 50%; bottom: 12px; translate: -50% 0; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 12px; font-weight: 600; pointer-events: none; transition: opacity .3s var(--out); }
.scrolled .hint { opacity: 0; }
@container (max-width: 380px) { .nav a { display: none; } }
@media (prefers-reduced-motion: reduce) { .header, .cta { transition: none; } }

Use it for

Landing pages with a full bleed hero image or colour
Sites where the header must stay readable over any content below the hero

Avoid

Pages with no hero, where the header can simply be solid from the start
Headers so tall that the blur covers useful content

How it works

A passive scroll listener toggles one class when scrollTop passes 20px. The header is position: sticky, and the class switches its background to a translucent white with backdrop-filter blur, a 1px bottom border and dark text. CSS transitions on colour and background do the fade, so the listener only flips a class.

Accessibility

Text contrast holds in both states: white on the dark hero, ink on the white backdrop. Reduced motion switches instantly. The listener is passive and does no layout work, so scrolling stays smooth.

Found on

Next: Layered scroll parallax