JS不要！CSS2行でスクロール時に見出しを要素毎に固定する方法

    <section>
        <h2>見出し1</h2>
        <p>最初のコンテンツが...</p>
    </section>
    <section>
        <h2>見出し2</h2>
        <p>2番目のコンテンツが...</p>
    </section>...

h2{
    position: sticky;
    top: 0;  
}

「position:sticky;」を指定するとスクロールした際、親要素のボックス内の指定した位置に、要素を固定表示できます。

サイドバーに目次を表示している場合などに使えそうですね。

サイト制作やブログなどで活用してみてください。