はじめに

こんにちは。HRBrainでオウンドメディア・ランディングページの開発を担当している渡邉です。

Webサイト制作でよく使う固定ヘッダー。

この記事では、 position: sticky で固定ヘッダーを実装するメリットについての解説と、実装例を紹介します。

position: fixed の問題点

position: fixed は、要素をビューポート（ブラウザの表示領域）に対して固定表示する際に便利なプロパティです。

しかし、 position: fixed を使用すると、固定された要素が他の要素の上に重なって表示されてしまうため、コンテンツが隠れる問題が発生します。

これは、position: fixed を適用することでヘッダーが通常フローから外れるためです。

例えば、以下のようなHTML構造とCSSスタイルシートを考えてみましょう。

上記の例では、ヘッダーを画面上部に固定表示するために position: fixed を使用しています。

しかし、ヘッダーが通常フローから外れ、コンテンツがヘッダーの下に隠れてしまうため、 margin-top でコンテンツを下にずらす調整が必要になります。

この margin-top の値は、ヘッダーの高さに合わせて調整する必要があり、ヘッダーの高さが変更された場合は、 margin-top の値も変更する必要があり、メンテナンスが煩雑になる可能性があります。

例えば、以下のように、ページ最上部に他の要素を追加する場合にも、margin-top を再調整するきっかけになります。

一方、position: sticky を使用することで、 position: fixed のように要素が他の要素の上に重なって表示されることを防ぎ（通常フローから外れない）、自然なスクロール動作を実現できます。

初期状態では通常の要素と同じように配置されますが、スクロールが指定した閾値に達すると、その位置で固定表示されるようになります。

先ほどのHTML構造を position: sticky を使用して書き換えてみましょう。

上記の例では、ヘッダーに position: sticky と top: 0 を指定することで、ヘッダーが画面上部に固定表示されるようになります。

position: fixed のようにコンテンツを下にずらすための margin-top の設定が不要になり、変更漏れによるレイアウトの崩れを防ぐことができます。

本記事では、 position: sticky を使用した固定ヘッダーの実装方法を紹介しました。

position: sticky は通常フローから外れないため、後続の要素に対するmargin設定も不要です。

固定ヘッダーの実装に最適なので、ぜひ使ってみてください。

HRBrainではフロントエンドエンジニア（コミュニケーションデザイン）の採用も行なっているので、ぜひ！