どうやって作成するか：スクロール時の固定ヘッダー

CSSとJavaScriptを使用してスクロール時の固定/粘性ヘッダーを作成する方法を学びます。

自分で試してみてください

スクロール時の固定ヘッダーを作成します

第1ステップ - HTMLを追加：

<div class="header" id="myHeader">
  <h2>My Header</h2>
</div>

第2ステップ - CSSを追加：

ヘッダーのスタイルを設定します；position: sticky と top: 0 を追加して、ヘッダーが先頭にスクロールすると固定されます。 
.header {
  position: sticky;
  top: 0;
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

自分で試してみてください

要素を設定します position: sticky; 以降、その位置はユーザーのスクロール位置に応じて決定されます。

粘性要素は、スクロール位置に応じて相対定位と固定定位の間で切り替わります。指定されたオフセット位置に視口内に到達するまで、相対定位を維持し、到達するとその位置に「粘着」します（ position: fixed 同様です）。

注意：粘性定位が有効になるためには、少なくとも指定する必要があります top、right、bottom または left の中の1つ。

関連ページ

チュートリアル：CSS position