スマートCSSを使用して、ユーザーのスクロール位置に基づいてスタイルを適用します。

<header>私はページのヘッダーです</header>
<p>ここにはたくさんのコンテンツがあります...</p>
<p>さらに美しいコンテンツ...</p>
<p>コンテンツ...</p>

document.addEventListener('スクロール', () => {
  document.documentElement.dataset.scroll = window.scrollY;
});

/* ヘッダータグが常に 3em よりも高くなるようにします */
ヘッダー {
  最小高さ: 3em;
  幅: 100%;
  背景色: #fff;
}

/* ページ上部のヘッダーの最小高さと同じ高さを維持します */
html:not([data-scroll='0']) 本文{
  パディングトップ: 3em;
}

/* ヘッダータグを固定配置モードに切り替えて、ページの上部に固定します*/
html:not([data-scroll='0']) ヘッダー {
  位置: 固定;
  上: 0;
  zインデックス: 1;

  /* box-shadow プロパティは浮遊効果を高めることができます */
  ボックスシャドウ: 0 0 .5em rgba(0, 0, 0, .5);
}

// 現在のページのスクロール位置を読み取り、ドキュメントのデータプロパティに保存します // スタイルシートで使用できるようにします const storeScroll = () => {
  document.documentElement.dataset.scroll = window.scrollY;
}

// スクロール イベントをリッスンします document.addEventListener('scroll', storeScroll);

// ページが初めて開かれたときにスクロール位置を更新します storeScroll();

// debounce関数はカスタム関数をパラメータとして受け入れます const debounce = (fn) => {

  // これには requestAnimationFrame への参照が含まれているので、いつでも停止できます。let frame;
  
  // デバウンス関数は複数のパラメータを受け入れることができる新しい関数を返します return (...params) => {
    
    // フレームの値が存在する場合は、対応するコールバックをクリアします。if (frame) { 
      アニメーションフレームをキャンセルします。
    }

    // ブラウザが次のフレームを更新するときにコールバックを実行する frame = requestAnimationFrame(() => {
      
      // カスタム関数を実行し、パラメータを渡します fn(...params);
    });

  } 
};

// スクロール位置を読み取り、データ属性に保存します
// スタイルシートで使えるようにする
const storeScroll = () => {
  document.documentElement.dataset.scroll = window.scrollY;
}

// 新しいスクロールイベントをリッスンします。ここで `storeScroll` 関数をデバウンスします。
document.addEventListener('スクロール'、デバウンス(storeScroll));

// 初めてスクロール位置を更新します
ストアスクロール();

document.addEventListener('scroll', debounce(storeScroll), {passive: true });