CSSで簡単にスティッキーヘッダ―を実装する方法

今回は、CSSで簡単にスティッキーヘッダ―を作成する方法について紹介していきたいと思います。

スティッキーヘッダ―はjQueryで実装するのが定番でしたが、CSSでも簡単に作れるようになっており、今回はそれについて紹介していきたいと思います。

1.スティッキーヘッダーとは？

スティッキーヘッダーとは上部に位置しているナビゲーションなどの要素が、下にスクロールしても追従していくヘッダ―の事です。実際にコーディングしたデモがこちらになります。 ※0.5倍率で見てください。

2.スティッキーヘッダーを実装するCSSのコード

メインのCSSのコードはスティッキーヘッダーを実装したい要素にたった2行のコードを追記するだけです。

position: sticky;を設定することで、指定された要素が固定され、top: 0;を設定する事で、ブラウザの上部からの距離が0で固定されることになります。

もしtop: 20px;に設定するとブラウザの上から20px離れた位置に固定されることになります。

jQueryを使わなくても、とても簡単に実装する事ができましたね。

ちなみに、スティッキーヘッダーは入れ子に設定してもちゃんと動作してくれません。指定するところは子要素ではなく、必ず親要素に指定する様にしましょう。

3.未対応ブラウザについて

position: sticky;を指定する事で簡単にスティッキーヘッダーを実装できますが、対応されていないブラウザもあります。

指定したプロパティのブライザ対応状況をチェックできる「Can I use」 で確認すると、Firefox、Chrome、Safari、Edgeは対応しており、IEは未対応となってます（2021年2月現在）。またSafariについてはベンダープレフィックス-webkit-が必要になります。

ブラウザがプロパティをサポートしていなければ、思った通りの挙動をしてくれないので、新しく使用する際はブラウザがサポートしてくれているか、チェックする癖をつけておきたいですね。

今日は以上となります。