実装
- 固定させたい要素に
position: sticky;を付与する - 固定させる位置
top: 0;を指定する
footerの場合はbottom: 0;とすれば下に固定されます。
<body><headerclass="ly_header">ヘッダ</header><mainclass="ly_main">メインコンテンツ</main><footerclass="ly_footer">フッタ</footer></body>.ly_header{position:sticky;position:-webkit-sticky;top:0;}See the Pen fixed-header by heeroo-ymsw (@heeroo-ymsw) on CodePen.
実装時のポイント
stickyの機能の仕方
stickyを指定した要素は、それを内包するコンテナ内でのみ固定されます。
つまり、前述の例でいえば、body内で固定されていることになります。
以下の例を見れば分かりやすいかと思います。
<divclass="bl_contents"><divclass="bl_contents_item bl_contents_item__sticky">スティッキーアイテム</div><divclass="bl_contents_item">普通のアイテム</div></div><divclass="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が機能しません。
<divclass="bl_contents"><divclass="bl_contents_item bl_contents_item__sticky">スティッキーアイテム</div></div>この場合、stickyアイテムには兄弟要素がないため、stickyしたくてもする場所がありません。
よって、うまく機能しないということになります。
対応ブラウザ
Can I useによると、ほぼ全ての主要ブラウザは対応しています。
Safariではベンダープレフィックスを加える必要がありますので、以下のように記述します。
.stickyItem{position:sticky;position:-webkit-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