【css】position「sticky」を使ってみた

スマホやPCでヘッダー、フッター等スクロール時に固定されているwebページを閲覧した事があると思います。

通常、固定するだけなら「fixed」を使用するだけで簡単にできますが、一定の位置にスクロールした場合に要素を固定、解除する動きはjsを使用して「fixed」を効かせたり、解除をする必要がありました。

しかし、「sticky」を使用するとjs不要でcssのみで固定や解除をする事ができます。

実装はカンタン！！
htmlに追従する範囲の全体を囲む親要素、追従させたい要素、その他の兄弟要素を準備します。

基本の動きであればこれだけになります。
スクロール時、class="wrapper"の範囲内最上部で固定されます。

親要素、兄弟要素について

「sticky」を指定した要素の親要素に高さがない場合や兄弟要素がない場合、stickyは効きません。
親要素と子要素の高さが同じになる為、固定ができなくなります。

親要素にheightをもたせたり、兄弟要素を追加して要素に高さを持たせることで追従固定の動きになります。

position_stickyが複数ある場合

「sticky」が複数ある場合、まず1つ目の「sticky」を指定した要素が範囲内最上部で固定されます。
さらにスクロールを続けて次の「sticky」を指定した要素を通過時、多い被るように次の「sticky」に変更されます。

階層を分けた場合

階層を分ける事でコンテンツ内にもさらに「sticky」を効かせる事もできました。
小見出しでも使用追従させたい場合も使用できそうです。

サポートブラウザ

古いIEでは使用できないようですが、他主要ブラウザは問題なさそうです！！

Safariでは、プレフィックス（-webkit-sticky）が必要です。

他サポートブラウザ等詳しくはCan i useでご確認お願いします！！

position「sticky」、今回は実際にこの記事の見出し「position「sticky」とは」「使ってみよう」「最後に」に使用してみました。

この記事よりもテキストが多いページで使用すると今、どの見出しの内容を見ているのか分かりやすいかと思います。

なかなか使用する機会はないのかもしれませんが、jsを使用せず、cssのみで実装となればサイトの表示スピードの改善にも繋がってくるので同じような動きを実装するのであればposition「sticky」を使用していきたいと思います。