コーディング

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

2017.11.06

固定メニューが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で固定しています。

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

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

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

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

ブラウザの対応状況

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

SHARE

この記事の筆者

Web&Soundクリエイター 田村 培修

Web&Soundクリエイター 田村 培修

楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。