【Next.js】スクロールで背景が変わる固定ヘッダーの作り方を解説

export function SiteHeader() {
    return (
      <header className="fixed inset-x-0 top-0 z-50 px-6 py-4">
        <div className="mx-auto flex max-w-6xl items-center justify-between">
          <a href="/" className="text-sm font-semibold tracking-wide">
            NORTHLINE
          </a>
          <nav className="hidden gap-8 text-sm md:flex">
            <a href="#work">Work</a>
            <a href="#about">About</a>
            <a href="#contact">Contact</a>
          </nav>
        </div>
      </header>
    );
  }

"use client";
  
  import { useEffect, useState } from "react";
  
  export function ScrollHeader() {
    const [scrolled, setScrolled] = useState(false);
  
    useEffect(() => {
      const onScroll = () => setScrolled(window.scrollY > 16);
      onScroll(); // ページの途中で再読み込みした場合にも合わせる
      window.addEventListener("scroll", onScroll, { passive: true });
      return () => window.removeEventListener("scroll", onScroll);
    }, []);
  
    return (
      <header
        className={
          "fixed inset-x-0 top-0 z-50 transition-colors duration-300 " +
          (scrolled
            ? "border-b border-zinc-200/60 bg-white/75 backdrop-blur-md"
            : "border-b border-transparent bg-transparent")
        }
      >
        <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
          <a href="/" className="text-sm font-semibold">
            NORTHLINE
          </a>
          <nav className="hidden gap-8 text-sm md:flex">
            <a href="#work">Work</a>
            <a href="#about">About</a>
            <a href="#contact">Contact</a>
          </nav>
        </div>
      </header>
    );
  }

<header className="fixed inset-x-0 top-0 z-50 px-4 pt-3">
    <div
      className={
        "mx-auto flex h-14 max-w-5xl items-center justify-between rounded-full px-5 transition-all duration-300 " +
        (scrolled
          ? "border border-white/40 bg-white/70 shadow-sm backdrop-blur-md"
          : "border border-transparent")
      }
    >
      {/* ロゴとナビは Step2 と同じ */}
    </div>
  </header>

"use client";
  
  import { useEffect, useRef, useState } from "react";
  
  export function AutoHideHeader() {
    const [hidden, setHidden] = useState(false);
    const [scrolled, setScrolled] = useState(false);
    const lastY = useRef(0);
  
    useEffect(() => {
      lastY.current = window.scrollY;
      const onScroll = () => {
        const y = window.scrollY;
        setScrolled(y > 16);
        const diff = y - lastY.current;
        if (Math.abs(diff) < 8) return; // 小さな揺れは無視する
        setHidden(diff > 0 && y > 120); // 下向き、かつヒーローを過ぎたら隠す
        lastY.current = y;
      };
      onScroll();
      window.addEventListener("scroll", onScroll, { passive: true });
      return () => window.removeEventListener("scroll", onScroll);
    }, []);
  
    return (
      <header
        className={
          "fixed inset-x-0 top-0 z-50 transition duration-300 focus-within:translate-y-0 " +
          (hidden ? "-translate-y-full" : "translate-y-0") +
          (scrolled ? " bg-white/75 backdrop-blur-md" : "")
        }
      >
        {/* ロゴとナビ */}
      </header>
    );
  }