position: sticky
セクション見出しの
貼り付きデモ
下にスクロールすると、色違いの見出しが画面の上端に貼り付き、
次のセクションが来ると押し出されて入れ替わる動きをご確認いただけます。
セクション1：青のセクション
このセクションをスクロールすると、上の青い見出しが画面の上端に貼り付いて、ついてくるのが分かります。これは、見出しに position: sticky; top: 0; が指定されているためです。
そして見出しの親要素は、このセクション全体（<section>）です。だから、見出しが貼り付いていられるのは、このセクションの中だけ。セクションが終わると、次のセクションの見出しに押し出されて入れ替わります。下にスクロールして、その瞬間をご確認ください。
セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。
ダミーのコンテンツです。スクロールしながら見出しの動きを観察してみてください。さらにスクロールすると、セクションの終わりに近づきます。
ダミーのコンテンツです。もうすぐ次のセクションが見えてきます。次のセクションが来ると、青い見出しは押し出されて消えます。
セクション2：緑のセクション
セクション2に入りました。今度は緑色の見出しが画面の上端に貼り付いています。
先ほどの青い見出しは、自分のセクション（親要素）の範囲を超えたので、もう画面から消えています。これが「sticky 要素は親要素の中だけで貼り付く」というルールの目に見える現れです。
ダミーのコンテンツです。緑のセクションをスクロール中。緑の見出しが上に貼り付いています。
セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。
ダミーのコンテンツです。もうすぐ次のセクションに移ります。次のセクションの見出しが見えてくるはずです。次はオレンジのセクションです。
セクション3：オレンジのセクション
セクション3、オレンジ色の見出しに切り替わりました。
注目してほしいのは、見出しが切り替わる「瞬間」です。前の見出しが上に押し出されながら、新しい見出しが下から到着して、すれ違うように入れ替わります。このアニメーションのような動きが、CSS の position: sticky だけで実現できます。
ダミーのコンテンツです。オレンジのセクションを下にスクロール中。オレンジの見出しは画面上端で待機。
セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。
ダミーのコンテンツです。もう少しで次のセクションへ。最後は紫のセクションです。スクロールを続けてください。
セクション4：紫のセクション
最後のセクション、紫色の見出しになりました。
このセクションが終わると、フッターに到達します。紫の見出しもセクション4の終わりで離れて、フッターには貼り付かないはずです。これも sticky のルール通り。「親要素（セクション4）の外には出ない」という動きです。
ダミーのコンテンツです。最後のセクションをスクロール中。フッターまであと少し。紫の見出しは、自分のセクションの終わりまで貼り付いていられます。
セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。セクションの本文が続きます。
ダミーのコンテンツです。もうすぐフッターです。これで全セクション終わりです。
このページは以下の記事のデモです。
デモの使い方や詳細な解説は、記事内でご覧いただけます。
