【2行だけ！】CSSでスクロール途中でヘッダーナビを上部に固定する方法【超簡単】

WEBサイトのページをスクロールした時、下の方にあったヘッダーメニューが画面外に行きそうになったら上部に固定されるようになる。

という挙動をするWEBサイトを見たことがあると思います。

どうやって実装するか知りたい！

という方へ、超簡単な実装方法をご紹介します。

実際にどういう動きをするか見てみたい方は株式会社LIGさんのホームページにも使われていますので、見に行ってみるといいですよ。（いつかサイトをリニューアルしてこの動きをしなくなる可能性もありますが･･･｡）

記事の内容

やり方

固定したい要素にCSSでこのコードを当てるだけです。

	position: sticky;
	top: 0;

top や left などで位置を調整すれば、自分の好きな位置に配置することも可能です。

このように、画面から要素がはみ出る時になったら上部に固定されます。

<header>要素にposition:stickey;とtop:0; を設定してあるので、画面上部に固定となります。

各boxにposition:sticky;を当て、上から順番にz-indexで重なり順を決めています。

このテクニックをうまく応用すれば、ちょっとしたCSSの記述でスタイリッシュな挙動をするサイトを作ることができます。

今回はナビゲーションを固定する方法の紹介なので簡単に説明しましたが、ただ単にposition:stickey;を当てれば上記のような挙動になるのではなくて、具体的に言うと、

position:stikey;が当てられた要素が、親要素の中で画面外にはみ出る時に画面固定になる。

ちょっと分かりにくいので、後述でプレビューを用意してあります。

position:stikey;を当てた要素の親要素が画面外に行くと、追従も解除されて親要素と共に画面外へいきます。

今回の説明での<header>要素の親は<body>になるので、どこまでもついてくるということになります。

文章では分かりにくいと思うので、プレビューで見てみましょう。

ヘッダーナビに緑色のエリアで１つ親要素を追加しました。

スクロールしていくと分かるように、緑色のエリアが画面外へ行くまで追従になり、親要素が画面外に行くとヘッダーナビも一緒に画面外へ行きます。

そして上にスクロールして戻ると、本来のもとの位置に。

position:stikey; を効かせている先祖要素に、overflowを効かせていると動きません。

これを知っていないとハマることになるので注意してください。

2022年5月現在は、

これらの主要ブラウザに全て対応するようになりました。（嬉しい！）

IEはサポート外です。

しかしIEは2022年6月頃にブラウザのサポート自体を終了になるので気にしなくて大丈夫です。

: 【IEは必須？】WEB制作でブラウザの動作チェックはどこまでやればいいのかを解説

WEB制作をしている時に、納品前に必ずやっておかなければならないのがブラウザの動作チェック。そんな中で、ブラウザチェックはどこまでやればいいのか？ IE（Internet Explorer）の動作 ...

続きを見る