QiitaやZennなどの目次の実装方法について

Question

QiitaやZennなどのブログサービスでは目次がありますが、記事をスクロールすると閲覧中の目次が強調表示されるようになっています。

あれはどのように実装されているのでしょうか？
（JavaScriptでスクロール位置を取得して、通過したheaderタグを取得していたりするのでしょうか・・・）

もちろん実際のところは中の人しかわからないことだとは思いますが、セオリー等ご存知でしたら教えていただきたいです。

Answer 1

「スクロールスパイ」というものと思います。
その機能が実装されているCSSフレームワークもあります。

Comments

[irithyll]

ご回答ありがとうございます。
CSSフレームワークにもそのような機能があって名前がついてるんですね。
勉強になりました。

[m.ts10806]

teratailのヘルプページや「質問するときのヒント」も同様の機能かと思います

Answer 2

Intersection Observer API を使うのがよいと思います。
画面にセクションが表示されたときのイベントで、目次の該当項目を強調表示するよう切り替える処理を実行する例が以下ページで紹介されています。
JSでのスクロール連動エフェクトにはIntersection Observerが便利 - ICS MEDIA

Comments

[irithyll]

早速のご回答ありがとうございます。
紹介していただいた実装方法がドンピシャで解決できました。