CSSでヘッダーを一番上に固定したままスクロールできるようにする３つの方法
ヘッダーを一番上に固定しよう
ホームページのヘッダーを一番上に固定したいことってよくありますよね？
今回は３つほどやり方を紹介します。
-
position: fixedを使う方法 -
display: flexを使う方法 -
position: stickyを使う方法
サンプルコードのbase,.header,.contents部分は同じものを使っています。
おすすめは３つ目のposition: stickyを使う方法です。
1. position:fixedを使う方法
古き良き、ヘッダーの高さと同じ長さのマージンを中身の要素に入れる方法です。
この後紹介する書き方と違って昔からあるスタイルを使うのでIEなど古いブラウザでも動く可能性が高いです。
ただ、ヘッダーの高さが決まっていないとマージンの調整ができません。マジックナンバーになるのがよくないですね。最近はCSSで変数も使えるのでそちらを使ってもいいですが、それを使えるブラウザならこれ以外の書き方でやったほうがいいと思います。
2. display: flexを使う方法
CSSでレイアウトと言ったらflexですよね。もちろん、ヘッダーにも使えます。
flexにしたもの(サンプルコードではbaseクラスがついたdiv要素)を画面いっぱいに伸ばし、ヘッダーの高さを確保する方法です。
こちらはcontents部分にoverflow: autoをつけることによってスクロールを可能にしています。
今回は画面いっぱいにするためにtop、bottom、left、rightを使っています。
topとleftだけ指定してwidthとheightを設定する方法もありますが、iOS系でうまく動かなかったような気がします。（手元に端末がないため、確かめることができません。すみません。）キーボードが出ているときの動きがよくなかった記憶があります。
それ以外は安定した動きをすると思うので比較的おすすめできます。スクロールバーをヘッダーにかぶせたくない場合はこの方法をとることになると思います。
3. position: stickyを使う方法
主要ブラウザに実装されて、2年半以上経った[1]ので、そろそろ使ってもいいかなといった印象です。
これの使い方は簡単。ヘッダーにposition: stickyを指定して、top: 0pxと書けば一番上に固定されます。
position: stickyをつけるとその要素は指定された場所にとどまるようになりますが、position: fixedと違い祖先要素の指定された場所にとどまります。
最近のブラウザではこれを使っておくと間違いないでしょう。
まとめ
どのブラウザを対象にするかで多少変わるかもしれませんが、個人的にはposition: stickyがおすすめです。
ちなみに、Zennさんもposition: stickyを使っていますね。
CSSもどんどん便利になっていい時代になりましたね。
蛇足
誤字脱字のチェックにChatGPTを使ってみました。stickyのスペルミスが見つかりました。危なかった。
いい時代になりましたね。
参考
-
Widely available になるのが主要ブラウザでサポートされてから2.5年経過のようです。 https://developer.mozilla.org/ja/docs/Glossary/Baseline/Compatibility ↩︎
Discussion
flex を挙げるなら grid でもできますね。感あります。（こっちであれば grid-areaで名前をつけてもいいかもしれません
確かにそうですね。gridは頭から抜けていました。
grid-template-rowsで名前を付けれるのも初めて知ったので勉強になりました。
ありがとうございます。