CSSでスクロールに追随して位置を固定させたい
スクロールしてもある位置で固定され続けるような要素を実現するためのCSS、position: sticky; の使い方についてまとめます。
例えば画面上部で固定表示されるヘッダーや、画面をスクロールして画面上部まで来た時点で固定されるようなサイドメニューなどです。jQueryなどを使って実現できますが、新しいCSSの position: sticky; を使えば、数行のCSSで実現可能です。CSSのみで実現可能なため、負荷がすくなくていい感じです。
position: sticky とは
sticky は、「ねばねばする、べとつく、粘着する」みたいな意味です。指定した位置に張り付いてくれます。
使い方は固定したい要素に基本2行書くだです。
position: sticky;- 固定したい位置を
topbottomleftrightで指定
割りと直感的に使用できるので、実際に使ってみるとすぐに便利さや応用に気が付きます。以下に簡単なサンプルを示します。
ヘッダーの固定
例えばヘッダーをスクロール固定して常に上部に表示される用にする例です。スクロールしてもヘッダーが上部で固定されたままになるのが確認できます。
HTML
<div class="header">ここがヘッダーです</div>
<div class="main">ここにいろいろなコンテンツが表示される想定です。</div>
<div class="footer">ここがフッターです</div>
CSS
.header {
position: sticky; /* スクロールしても固定表示したい */
top: 0; /* 画面上部の位置で固定 */
background-color: red;
}
.main {
height: 1200px;
}
途中から固定する
最初は見えていないけど、スクロールしていくと現れて、ある位置で固定される、みたいな実装も position: sticky; で実現可能です。例えばブログページのサイドメニューなので途中から固定されるみたいな実装をたまに見かけたりするかと思います。追尾型の目次や広告などがそれです。
position: sticky; で固定されるのは、適用された要素の親要素が表示されている間のみです。したがって、親要素が見えていない場合は、固定もされません。
HTML
<div class="div"></div>
<div class="div parent">
<div class="sticky">
固定されます
</div>
</div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
CSS
.sticky {
position: sticky;
top: 10px;
background-color: red;
}
.div {
height: 600px;
}
.parent {
background-color: yellow;
}
上記例では、黄色い背景色のエリアの中の赤背景色のエリアを position: sticky; で top: 10px; の位置で固定しています。
最初は下の方にありますが、画面をスクロールして、固定位置に来たタイミングでスクロールに追随する形で表示位置が固定されます。親要素の黄色いエリアが表示領域から消えるタイミングで、固定が解除され表示されなくなります。
IE, Edgeで使えるようにしたい
便利なCSSの position: sticky; ですが、IEとEdgeでは対応していないため使用できません。
がしかし、IEやEdgeでも対応させるための sticky-state というライブラリがあります。これを使えば対応できるみたいです。
以上。
