position: sticky; デモ

下にスクロールしてみてください。
各エリアの見出しが上部にピタッとくっつきます！

エリア 1 の見出し

エリア1に入りました！

見出し1が固定されます。

まだまだスクロールしてね！

エリア 2 の見出し

エリア2に入りました！

見出し1が押し出されて、見出し2が固定されます。

エリア 3 の見出し

エリア3に入りました！

見出し3が固定されます。

JSを使わなくても、CSSだけでこんな動きが作れます。

スクロール用スペース