固定メニューがjsなしで簡単に実装できるposition:sticky

画面のスクロールに合わせて追従してくるタイプのグローバルメニューやサイドボタンをご覧になったことがあると思います。今までは追従し始めるタイミングを指定するためにjsでページトップからの高さや要素のidやclassを参照させていましたが、position:stickyを使うとこの動きがcssだけで実装できます。今回はその使い方を紹介します。

縦方向の基準点を定めた場合

position:stickyで指定された要素は、その親要素の範囲内でposition:fixedされたときのように動作します。
動きの例を見たほうがわかりやすいと思うので下の例をご覧ください。

See the Pen YEqbvB by hoshu_t (@hoshu_t) on CodePen.

body内のtop:10pxの位置にposition:stickyで固定しています。

横方向の基準点を定めた場合

横方向の動作にも対応しています。基準点の指定をleftやrightに指定するとそのように動作します。
left:0;で実装した例を見てみましょう。

See the Pen gXrJJb by hoshu_t (@hoshu_t) on CodePen.

スクロールに追従してくるのがわかります。

ブラウザの対応状況

CanIuseを見てみるとEDGEにはVer16から対応していますがIE11には未対応なプロパティです。Stickyfillというおなじみのjsハックはあるようですがせっかくcssのみで実装できる機能なので、これを期にIE11ユーザーにはEDGEや他ブラウザへの乗り換えを検討してもらいたいですね。