AI向け説明 AI Description

スクロール時に固定表示されるステッキーヘッダー。`position: sticky`と`top: 0`で実装します。スクロール時に背景色と影を変更するには、`scroll`イベントを監視し、`window.scrollY`の値に応じてクラスを追加/削除します。`backdrop-filter: blur()`で背景をぼかすこともできます。ただし、祖先要素に`overflow: hidden`や`overflow: auto`が設定されている場合、`position: sticky`は機能しません。その場合は`position: fixed`を使用し、`body`に`padding-top`を追加してコンテンツのずれを補正してください。

A sticky header that remains fixed while scrolling. Implemented with `position: sticky` and `top: 0`. To change background color and shadow on scroll, monitor the `scroll` event and add/remove classes based on `window.scrollY` value. You can also blur the background with `backdrop-filter: blur()`. Note: `position: sticky` will not work if any ancestor element has `overflow: hidden` or `overflow: auto`. In that case, use `position: fixed` instead and add `padding-top` to the body to offset the content.

調整可能パラメータ Adjustable Parameters

• --header-bg — ヘッダーの背景色と透明度 header background color and opacity
• --header-shadow — ヘッダーの影 header shadow
• backdrop-filter — 背景のぼかし効果 background blur effect

実装 Implementation

HTML + CSS + JS

<header class="sticky-header" data-sticky-header>
  <nav class="sticky-header__nav">
    <a href="#" class="sticky-header__logo">Logo</a>
    <div class="sticky-header__links">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </div>
  </nav>
</header>

<style>
.sticky-header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #dfe3f6;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  z-index: 1000;
}

.sticky-header.scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sticky-header__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
}
</style>

<script>
const header = document.querySelector("[data-sticky-header]");
window.addEventListener("scroll", () => {
  if (window.scrollY > 50) {
    header.classList.add("scrolled");
  } else {
    header.classList.remove("scrolled");
  }
});
</script>

React (JSX + CSS)

// react/L-005.jsx
import { useState, useEffect } from "react";
import "./L-005.css";

export default function StickyHeader() {
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 50);
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <header className={`sticky-header ${scrolled ? "scrolled" : ""}`}>
      <nav className="sticky-header__nav">
        <a href="#" className="sticky-header__logo">Logo</a>
        <div className="sticky-header__links">
          <a href="#">Home</a>
          <a href="#">About</a>
          <a href="#">Contact</a>
        </div>
      </nav>
    </header>
  );
}

/* react/L-005.css */
.sticky-header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #dfe3f6;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  z-index: 1000;
}

.sticky-header.scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sticky-header__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
}

注意とバリエーション Notes & Variations

position: sticky が効かない場合 When position: sticky doesn't work

position: sticky は、祖先要素に overflow: hidden、overflow: auto、または overflow: scroll が設定されていると機能しません。これは CSS 仕様上の制約です。フレームワークや CSS リセットが暗黙的に overflow を設定していることもあるため、DevTools で祖先要素を確認してください。

position: sticky will not work if any ancestor element has overflow: hidden, overflow: auto, or overflow: scroll. This is a CSS specification constraint. Frameworks or CSS resets may implicitly set overflow, so check ancestor elements in DevTools.

position: fixed で代替する方法 Using position: fixed as an alternative

sticky が使えない場合は position: fixed で同等の効果を実現できます。ただし、fixed は要素を通常のドキュメントフローから完全に外すため、以下の対応が必要です：

When sticky is not available, position: fixed achieves the same effect. However, since fixed removes the element from the normal document flow, you need to handle the following:

• width: 100% と left: 0 を追加（fixed 要素は幅が自動設定されないため） Add width: 100% and left: 0 (fixed elements don't inherit width automatically)
• body に padding-top を追加して、ヘッダーの高さ分だけコンテンツをずらす Add padding-top to body to offset the content by the header height

/* position: fixed version */
.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Offset body content for fixed header height */
body {
  padding-top: 60px;  /* adjust to match header height */
}

判定チェックリスト Decision checklist

• 祖先に overflow 指定なし → position: sticky（シンプルで推奨） No overflow on ancestors → position: sticky (simpler, recommended)
• 祖先に overflow あり、または変更不可 → position: fixed + body padding-top Ancestor has overflow, or cannot be changed → position: fixed + body padding-top