実装
- 固定させたい要素に
position: sticky;を付与する - 固定させる位置
top: 0;を指定する
footerの場合はbottom: 0;とすれば下に固定されます。
<body>
<header class="ly_header">ヘッダ</header>
<main class="ly_main">メインコンテンツ</main>
<footer class="ly_footer">フッタ</footer>
</body>
.ly_header {
position: -webkit-sticky;
position: sticky;
top: 0;
}
See the Pen fixed-header by heeroo-ymsw (@heeroo-ymsw) on CodePen.
実装時のポイント
stickyの機能の仕方
stickyを指定した要素は、それを内包するコンテナ内でのみ固定されます。
つまり、前述の例でいえば、body内で固定されていることになります。
以下の例を見れば分かりやすいかと思います。
<div class="bl_contents">
<div class="bl_contents_item bl_contents_item__sticky">スティッキーアイテム</div>
<div class="bl_contents_item">普通のアイテム</div>
</div>
<div class="bl_contents">
<p>hogehoge fugafuga</p>
</div>
.bl_contents_item__sticky {
position: sticky;
top: 0;
}
See the Pen sticky-sample1 by heeroo-ymsw (@heeroo-ymsw) on CodePen.
bl_contents_item__stickyクラスを指定した要素は、それを内包するbl_contents内でのみスティッキーを発揮することがお分かりいただけたと思います。
要素1つのみを内包する場合はstickyが機能しない
前述の内容を理解すれば当たり前だろと言いたくなるかもしれませんが、以下のような場合はstickyが機能しません。
<div class="bl_contents">
<div class="bl_contents_item bl_contents_item__sticky">スティッキーアイテム</div>
</div>
この場合、stickyアイテムには兄弟要素がないため、stickyしたくてもする場所がありません。
よって、うまく機能しないということになります。
対応ブラウザ
Can I useによると、ほぼ全ての主要ブラウザは対応しています。
Safariではベンダープレフィックスを加える必要がありますので、以下のように記述します。
.stickyItem {
position: -webkit-sticky;
position: sticky;
}
position: fixed;との違い
position: fixed;でもヘッダ固定はできますが、大きな違いとしては、ページレイアウト内にその要素のための空白を用意してくれないということです。
実際に見れば違いは一目瞭然です。
一番最初の例を用いて、position: fixed;にするとこうなります。
fixedを使うと、固定したい要素のwidthを指定したり、メインコンテンツにかぶらないようにmarginとったりなど、いろいろと気をつかわなければいけないことが発生します。
そのような点でstickyは簡素に記述ができ、便利です。
まとめ
stickyの動きをテキストで説明するならば、以下の特徴を持っているといえます。
-
relativeやstaticのように、ページレイアウト内にその要素のための空間が作られる -
fixedのようにビューポートの同じ場所にぴたっとくっつく -
relativeな親要素を持つabsoluteのようにそれを内包する親要素にとどまる
参考文献
CSS Position Sticky - How It Really Works! | by Elad Shechter
position - CSS: カスケーディングスタイルシート | MDN