スクロール時にcssで固定するposition:stickyの使い方と効かなくなる場合
2485 回閲覧されました
みなさんこんにちは、jonioです。
今回は「position:sticky」の使い方と動かなくなる場合について解説します。
ネットを見ると概念的な内容をダラダラと解説して結局何が言いたいんだろうと思う解説が多かったのですが私はなるべく簡潔に説明します。
position:stickyとposition:fixedとの違い
どちらも位置を固定する時に使いますが使い方が全く違います。
「position:fixed;」は「top:100px」など「この場所だ」と最初に指定した位置でずっと固定した状態にするのでヘッダーでしか役に立たない印象です。
それに対して「position:sticky;」は「親要素の中のこの場所」と指定ができて親要素が画面の一番上に来た時に発動します。
今だと親要素「parent」クラスが画面の一番上に来た（今回は最初から一番上にあるから発動する）時に「child-sticky」クラスに「position:sticky」が設定されているので位置が固定されます。
See the Pen
Untitled by hayata19791218 (@hayata19791218)
on CodePen.
どの位置に固定するかですが大体の人が画面の一番上に来た時に固定すると思うので「top:0;」を覚えておけば大丈夫だと思います。
「top:0;」は親要素の一番上からどこの位置かという事です。
「position:sticky;」を使えば画面を上にスクロールした時に特定の親要素の中で特定の子要素の位置の固定をする事ができますが注意点がありますのでその解説をします。
親要素の中で移動する高さがないといけない
ネットを見ると「親要素の領域が確保されていないといけない」みたいな説明がありかなり分かりにくいです。
どういうことかと言うと「親要素の中で移動する領域がないといけない」という意味です。
具体的な例で説明します。
↓は「position:sticky;」をピンク色の背景色に設定しても効きません。
See the Pen
Untitled by hayata19791218 (@hayata19791218)
on CodePen.
理由は親要素が「another-parent」クラスで移動する高さがないのと固定する要素意外に移動する要素がないので「child-sticky」クラスが固定はしているけど固定していない様に見えるからです。
移動する高さがあればいいので「another-parent」クラスにheightを付けると固定が効いている様に見えます。
See the Pen
Untitled by hayata19791218 (@hayata19791218)
on CodePen.
「position:sticky;」を効かせたかったら親要素に移動する高さを付けましょう。
今は親要素にheightを付けましたが親要素の中に子要素を置いて高さを付けてもよくそれが一般的だと思います。