折りたたみ要素の展開などでページの高さが変わってもハイライトがずれないようにしました。長い記事を読むとき、目次にハイライトがないとどこを読んでるのか分からなくなりますね。このサイトではサイドバーに目次があるのですが、今まで特に読んでいるところをハイライトするようなことはしていなかったので、あれば分かりやすいなと思いました。そこでサイドバーの目次をJavascriptでハイライトするようにしました。環境ワードプレスをCocoonを親テーマとして使っています。jQeuryは使わないでJavascriptオンリーで実装しました。jQueryは使いたくないという不思議なこだわりがあります。コード全体これらのスクリプトとCSSをコピペして、クラス名を調整すればOKです。子テーマのjavascript.jsとstyle.cssに追記します。あるy座標の範囲を章節ごとにオブジェクトの配列(tocList)として保持しておいて、スクロールするごとに現在のy座標を取得し、目次の.reading-secクラスの付与対象を決定します。章節ごとのy座標範囲はイベントでいうロード(load)か初回スクロール(scroll)時に初期化します。lastBodyClientHeight変数で直前のページ全体の高さを保持しておいて、スクロール時に変化していれば初期化し直します。各章節の上端と下端のy座標を保持します。下端は後続の章節の上端を設定して、最後尾の章節の下端はフッターの上端を使用します(最後尾は指定しなくても可)。スクロールイベントで保持している配列と現在のy座標をもとに目次の章節に付与するクラス.reading-secの付け替えを行います。グローバルにはあまり変数を残したくないので、無名関数に入れて即時実行させます。高頻度でアップデート関数が呼ばれないようにするため、requestAnimationFrame()を使って呼び出しを抑制します。各章節の<h2>タグなどのリストは問題なく取得できますが、それぞれのページ全体での位置(左上を原点とするy座標)を取得するのがちょっと面倒でした。offsetTopを使うとその要素の親から見たその要素のy座標が取得できるので、それを遡ってoffsetTopを足し合わせることにしました。遡るには、offsetParentを使えばいいです。parent.offsetParent;}クラス名にも注意します。サイドバーの目次に付与されるクラス.widget_tocが存在するか確認します。したらクラス名が異なっている可能性も十分あります。目次が存在しないページでは、.widget_tocは存在しないので何もせずに終了するようにしています。おわりCSSのクラスを追加するくらいなら割と楽な作業でした。Cocoonのクラス名の仕様はよく分からないままですが。したらワードプレスの仕様かもですが。.toc-数字みたいなのが謎だったので今回は使わないように実装しました。