position:stickyでスクロールしたら上部固定表示にする方法

2020-06-05CSS デザイン,CSS

CSSのpositionプロパティのstickyを使って、途中にある要素をスクロール後に上部固定表示にする方法の紹介です。

positionプロパティでstickyを指定した要素はtopプロパティで指定した位置までスクロールすると縦軸固定表示にすることが可能になるのでナビゲーションメニューなんかに使いやすい指定です。

position:stickyで上部固定表示する基本コード

#navi {
	position: sticky;
	position: -webkit-sticky;/* Safari用 */
	top: 0;
}

上記のコードで上部固定は実装可能ですが、基本的にはz-indexなどで深度を他の要素より手前に表示されるように設定します。

#navi {
	position: sticky;
	position: -webkit-sticky;/* Safari用 */
	top: 0;
	z-index: 2;
}

また、背景色がないと他の要素と重なり合って見にくくなってしまうので注意です。

position:stickyで上部固定表示したサンプルです。

See the Pen RwrNYpw by yochans (@yochans) on CodePen.

ナビメニュー部分が固定表示されていることがわかりやすいように、コンテンツ部分の高さと背景色を指定しています。

ナビメニュー部分の背景色にrgbaなどで透過を指定することで、少しおしゃれな感じになります。
※背景色を透過する事でSEOの観点からコントラスト比の問題に引っかかっていないかLighthouseなどで要確認