position: sticky
動作の仕組みデモ
下にスクロールしながら、青いバーが画面の上端に貼り付いてから、
親要素の下端で離れるまでの動きを確認してみてください。
① 通常セクション
ここは①通常セクションです。position: sticky の指定はありません。下にスクロールしていくと、まもなく②包含ブロックが現れます。
通常セクションのコンテンツが続きます。このあたりは普通にスクロールするだけです。バーはまだ出てきません。通常セクションのコンテンツが続きます。このあたりは普通にスクロールするだけです。バーはまだ出てきません。
もう少しスクロールすると、背景色が変わって②包含ブロックに入ります。そのとき、青いバー（sticky 要素）が登場します。引き続きスクロールしてみてください。
包含ブロック START
② 包含ブロック
ここから②包含ブロック（sticky の親）です。背景色が変わって、薄い青になりました。次に出てくる青いバーに、position: sticky; top: 0 が指定されています。
↑ 上の青いバーが、画面の上端に達したところから貼り付き始めます。
貼り付いた後は、ここをスクロールしている間、画面の上端に留まり続けます。親要素の中をスクロール中、バーは画面の上端に固定されたままです。親要素の中のコンテンツが続きます。バーは画面の上端に貼り付いたまま、テキストだけが下から上へ流れていきます。
ここも親要素の中の本文です。バーは画面の上端のままです。「親要素の中」を通り抜けていく感覚で、スクロールしていきましょう。親要素は、sticky の動きがしっかり伝わるよう、ある程度長めにしてあります。もう少しスクロールを進めます。
親要素の中の本文が続きます。バーは画面の上端から動きません。ここも親要素の中。引き続きスクロール。バーはまだ動きません。もう少しで親要素の終わりです。
そろそろ親要素の終わりが近づいてきました。もうすぐ親要素の下端がスクロールで画面の上端を通り過ぎます。その瞬間、青いバーは押し出されて見えなくなります。
包含ブロック END
③ 通常セクション
包含ブロックを抜けて、③通常セクションに戻ってきました。包含ブロックの外なので、もう青いバーは現れません。
このように、position: sticky は包含ブロックの中だけで貼り付き、包含ブロックを出ると一緒に押し出されていなくなります。上にスクロールして戻すと、②包含ブロックに再び入った時点で、青いバーが現れて貼り付きます。
通常セクションの本文が続きます。通常セクションの本文が続きます。通常セクションの本文が続きます。通常セクションの本文が続きます。通常セクションの本文が続きます。通常セクションの本文が続きます。通常セクションの本文が続きます。通常セクションの本文が続きます。通常セクションの本文が続きます。通常セクションの本文が続きます。
ここまでがデモの全体です。
このページは以下の記事のデモです。
デモの使い方や詳細な解説は、記事内でご覧いただけます。
