position: stickyでヘッダーを固定しよう

このレッスンでは、position: stickyを使ったヘッダー固定の方法を学び、スクロールしても見出しが見えるようにする方法を理解することを目標にします。「CSS position sticky 使い方」で調べている方向けです。

position: stickyは、普段は通常の位置にありながら、スクロールして画面の端に来ると、そこで貼りついたように止まる配置方法です。見出しやヘッダーを常に見えるようにしたいときによく使われます。

サンプルコードでは、.boxの中でoverflow-y: scroll;を指定し、その中のh3見出しにposition: sticky; top: 0;を指定しています。枠の中をスクロールすると、見出しが上部に貼りついたまま残り、本文だけが流れていく様子を確認してみましょう。

初心者がよくつまずくのが、position: stickyが効かないと感じるケースです。親要素にoverflow: hiddenが指定されていたり、topなどの位置指定を忘れていたりすると、意図した動作になりません。fixedのように常に固定するのではなく、「元の位置」と「固定される位置」の両方の性質を持つのが特徴です。

表の見出し行を常に見えるようにしたり、サイドバーを追従させたりする際に重宝します。長いコンテンツを扱うページで、ユーザーが今どこを見ているか把握しやすくする効果もあります。