position:stickyでヘッダー等の要素を指定範囲で追従させる方法

position: stickyは要素を特定の位置に固定するためのCSSプロパティです。

通常、要素はドキュメントのフローに従って配置されますが、position: stickyを適用することで、スクロールする際に要素が指定した位置に留まるようになります。

See the Pen Untitled by D Hiyoshi (@D-Hiyoshi) on CodePen.

要素にposition: stickyを指定すると、その要素が指定した位置に達するまで通常のフローに従って表示されます。そして、スクロールが指定した位置を超えると要素が固定され、スクロールに応じて画面上を追従して移動します。

一般的に、要素には以下のプロパティを指定する必要があります:

• position: sticky;：要素を固定するために指定します。
• top、bottom、left、right：要素を固定する位置を指定します。例えば、top: 0;を指定すると要素が画面の上部に固定されます。
• display: flexを指定した場合、align-itemsの値を指定する必要があります。flex-startは要素を上端に、flex-endは要素を下端に、centerは要素を縦方向の中央に配置し、baselineは要素をベースラインに揃えます。