Miobiki

  1. HOME
  2. css
  3. ウィンドウ固定要素をflex・gridレイアウトで表現する

ウィンドウ固定要素をflex・gridレイアウトで表現する

目次

固定ヘッダーなどウィンドウ固定要素のスタイルには、position: fixedを使うことが多いと思います。
ですが、ページ内リンクでジャンプした時にタイトルがヘッダーで隠れてしまったりするのが面倒だなと思ってました。
そういった時はずらす処理を追加したりしますが、何もしなくて済む方法がいいなと考えていたら、flexとgridの存在を思い出したので試してみました。

結果

fixedを使わずにflexやgridで固定レイアウトは簡単にできました。
他に考えることが出てくるのでトレードオフですが、個人的には

ページ内リンクでジャンプした時にタイトルがヘッダーで隠れてしまったりする

がなくなるので使える時は使いたいです。

懸念点

懸念点は固定を前提としたレイアウトになることです。
固定から非表示にする場合は、そのエリアの高さやマージンを調整すれば簡単です。
逆の場合、たとえば、ある程度スクロールされたら固定にしたい場合は素直にfixedのほうが楽だと思います。

先にどういった挙動になるのかを詰めた上で採用できればベストですが、
実装変更はそこまで大変ではなさそうなので、うまくいかなかった時もなんとかなりそうな気がします。

他にもスクロールイベントのハンドリング場所に注意したりする必要もありそうですね。

非表示アニメーションの参考gif

高さを0にしてheaderを隠す

上部固定要素の場合、高さを0にして隠すとレイヤーの矛盾を感じるのでマイナスマージンのほうがいいと思います。

マージントップをマイナスしてheaderを隠す

高さを0にしてnavを隠す

サンプル実装のリンク

position: fixed

ページ内リンクでジャンプするとヘッダーに被ります。
JSで位置調整をする必要があります。
さらに、画面下部にも固定要素がある場合は、その分マージンが必要になります。

flex

ページ内リンクでジャンプしてもヘッダーには被りません。
totopはwindowではなくスクロールエリアを指定します。

grid

flexをgridにした版

レイアウトはgridを利用していきたいですねー