L-005 Layout medium

How to create a sticky header スティッキーヘッダーの作り方

Sticky header that remains fixed at the top when scrolling. Customize background opacity and shadow. スクロール時に画面上部に固定表示されるスティッキーヘッダー。背景の透明度と影をカスタマイズできます。

sticky header navigation scroll

ライブデモ Live Demo

Section 1

Scroll down to see the sticky header in action. The header will remain fixed at the top of the viewport.

Section 2

Continue scrolling to see how the header stays in place while the content scrolls underneath.

Section 3

The sticky header provides easy navigation access at all times during scrolling.

Section 4

Keep scrolling to see the header background and shadow change as you scroll.

95%
20px

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

Sticky header that remains fixed at the top when scrolling. Customize background opacity and shadow.

スクロール時に画面上部に固定表示されるスティッキーヘッダー。背景の透明度と影をカスタマイズできます。

どこで使うかWhere to use

landing page, marketing site, portfolio, product page

ランディングページ、企業サイト、ポートフォリオ、マーケティングページ

特徴Key features

Header that switches from transparent to opaque on scroll using IntersectionObserver or scroll event. Smooth background and box-shadow transitions. Optional logo size change on scroll. No layout shift (position: sticky does not affect document flow).

IntersectionObserverまたはスクロールイベントでスクロール時に透明から不透明に切り替わるヘッダー。スムーズな背景とbox-shadowトランジション。スクロール時のオプションのロゴサイズ変更。レイアウトシフトなし（position:stickyはドキュメントフローに影響しない）。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
--header-bg—header background color and opacity
--header-shadow—header shadow
backdrop-filter—background blur effect

実装コード Implementation Code 

// 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>
  );
}
/* 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 */
}
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>
  );
}
.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;
}

.sticky-header__logo {
  font-weight: 600;
  color: #1d2242;
  text-decoration: none;
}

.sticky-header__links {
  display: flex;
  gap: 24px;
}

.sticky-header__links a {
  color: #5c6184;
  text-decoration: none;
  transition: color 0.2s ease;
}

.sticky-header__links a:hover {
  color: #5c6ac4;
}

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

The header uses position: sticky with top: 0. A small sentinel <div> at the top of the page is observed by IntersectionObserver. When the sentinel leaves the viewport (page scrolled down), a scrolled class is added to the header applying the opaque background and shadow. When the sentinel re-enters, the class is removed.

ヘッダーはposition:sticky + top:0を使用。ページ上部の小さなセンチネル<div>がIntersectionObserverによって監視されます。センチネルがビューポートから出る（ページが下にスクロール）と、scrolledクラスがヘッダーに追加されて不透明な背景と影を適用。センチネルが再入するとクラスが削除されます。

カスタマイズ方法Customization

Add a backdrop-filter: blur() on .scrolled for a frosted glass effect. Animate header height reduction on scroll by transitioning padding. Use CSS transition for smooth color changes rather than instant class swaps.

.scrolledにbackdrop-filter:blur()を追加してフロストガラスエフェクトに。paddingのトランジションでスクロール時のヘッダー高さ縮小をアニメーション。瞬時のクラス切り替えではなくCSSトランジションを使用してスムーズな色変化に。

注意点Caveats

A sticky header reduces the available viewport height, particularly noticeable on mobile. Test that the sticky header does not cover anchor link targets — add scroll-margin-top to sections equal to the header height.

スティッキーヘッダーは利用可能なビューポートの高さを減らし、特にモバイルで顕著です。スティッキーヘッダーがアンカーリンクのターゲットを隠さないようテストしてください — セクションにヘッダーの高さと等しいscroll-margin-topを追加してください。

よくある質問 Frequently Asked Questions

How to customize the sticky header? Sticky Headerをカスタマイズするには？

Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.

コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。

How to use the sticky header in React? ReactでSticky Headerを使うには？

Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.

提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。

What are the performance implications of sticky header? Sticky Headerのパフォーマンスへの影響は？

This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.

この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。

AIへの指示テンプレート AI Prompt Template

以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.