fixedはもう古い？ヘッダーやフッターを固定表示する方法

2022年10月26日WebCSS,HTML

努力未来 A BEAUTIFUL STAR、その名も「position: sticky」！！

stickyの英単語としての意味は、「粘着性のある」「ねばねばした」。

その名の通り、「position: sticky」は表示領域の任意の位置に要素を粘着させることができます。

Contents

ブラウザ対応は？

IE以外のモダンブラウザでは対応済み、Globalの対応率も96%と大きな問題はなさそうです。(2022年10月現在)

百聞は一見に如かずということで、さっそく下記のコードを試していただきたいと思います。

// header固定
position: sticky;
top: 0;
z-index: 1;// (必要に応じて)

// footer固定
position: sticky;
bottom: 0;
z-index: 1;// (必要に応じて)

たったこれだけのコードで、要素を固定表示にすることができます。

fixedのときには、ヘッダー、フッターの高さ分paddingをつけるなんてことをしていましたが、それが必要なくなりました！

レスポンシブ対応や要素量で高さの変わってしまうヘッダーでもJavaScriptを使わなくて済みます。

fixedのときには、「display: block」の状態でも「width: 100%」の指定が必要でしたが、これも必要なくなりました！

「position: sticky」ではdisplayの状態がきちんと反映され、inline、inline-blockのときにはコンテンツの最小幅、blockのときには親要素の幅になってくれます。

先ほどのコードでフッターの固定位置を「bottom: 0」→「top: 0」にするとわかりやすいのですが、なんと画面上部に固定されないのです。
stickyではあくまで「粘着」するだけなので、ページ上の要素の位置はそのままとなります。

試しにフッターのさらに下に、高さが120vhのdivを置いてみましょう。
フッターがスクロールされて画面上部（top:0）に到達したとき、その場所で粘着しているのがわかると思います。
※他の要素も固定しているときには、その要素に積み重なるようにして粘着します。

テキストベースで難しい表現になっていますが、こちらが仕様のすべてです。

上記3サイトの（2022年10月時点の）レイアウトでは、サイドバーが画面上部に到達したときに粘着するようになっています。
これらも「position: sticky」によるものです！

CSS3のプロパティには、ブラウザでの対応待ちのものも多くあります。

Can I use… などを通して対応状況を確認してから使用しましょう。

それではいつものいきます、

そんな株式会社アルタがお届けするソリューションが気になる方は…

Posted by Neon

Twitter大好き。