ページの途中から追従するボタンを作るならposition: stickyが便利で簡単

ページをスクロールしていき途中からボタンを追従させる場合は、jsで高さを取得して任意の高さを過ぎたらボタンを表示＆追従させる処理をしていた（ような気がする）が、ページ途中からの追従について、気になっていたposition: stickyを使用したらとても便利でした。

position: stickyの使い方

position: stickyで追従させるには、親要素の中の子要素に使用することになります。
サンプルページを表示

htmlは以下のようにしました。
親要素の中の子要素（ボタン部分）にposition: stickyを付けて追従させるイメージです。

        <div class="stickybox">
            <div class="stickybox_header">スクロールさせるための余白</div>
            <nav class="stickybox_nav">
                <ul>
                    <li><a href="#area1">ボタン1</a></li>
                    <li><a href="#area2">ボタン2</a></li>
                    <li><a href="#area3">ボタン3</a></li>
                    <li><a href="#area4">ボタン4</a></li>
                </ul>
            </nav>
            <div id="area1" class="stickybox_area areacolor">エリア1</div>
            <div id="area2" class="stickybox_area">エリア2</div>
            <div id="area3" class="stickybox_area areacolor">エリア3</div>
            <div id="area4" class="stickybox_area">エリア4</div>
        </div>

親要素（stickybox）の中の子要素（stickybox_nav）にposition: stickyを付けて、ボタン（子要素）を追従させます。

cssは以下のようにしました。
ボタン全体を梱包している部分にposition: stickyを付けています。

.stickybox_nav {
	position: sticky;
	top: 10px;
}
.stickybox_nav ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 20px 0 0;
}

※position: stickyに関係する親要素・子要素のcssのみ記載。ここではボタンの形状に関する部分は省略しています。

見てもらえばわかるように、ボタン全体を梱包している部分（stickybox_nav）にposition: stickyを付けただけです。
スクロールするとピタッと止まってくれるの気持ちいいですね。
jsを使用せずに実装できるなんて便利です。

position: stickyが効かないときに確認すること

とても便利なposition: stickyですが、ひとつ注意点があります。
親要素の中の子要素にposition: stickyを付けているのにも関わらず、動作しない場合は親要素にoverflow: hiddenがついているかもしれません。 position: stickyを適用した要素の親要素に、overflow: hiddenが適用されていると動作しません。
もし、親要素の中の子要素にposition: stickyを追加して、topなどの位置も指定して、それでも追従してくれない場合は、overflow: hiddenが隠れていないか調べてみることをお勧めします。