読んでいるところを追尾させたい

##Webページで訪問者が今どこを読んでいるのかを知らせたいです。
具体的に話します。
例えば、技術書や技術解説のWebを閲覧しているとき、長いといつ終わりが来るのか分からなかったり、それに伴いだるくなってしまったり、そもそも筆者の余談が多くて知りたいことが知れなかったりするじゃないですか。
なので、読者がページをスクロールし、ページの今どころ辺にいて、何を読んでいるのかを追尾して教えてくれるナビゲーションを作りたいです。
下記イメージです。

header
main
h2
h3
h4
h2←今ここ
h3
h2
h2
h3
h4
/main
footer

こんな感じで、今読んでいるところを太文字や、少し出っ張らせて協調したいです。
もちろん、PC版でのみの表示です。
具体的なサイトを出すとチームラボさんのスキルアップのサイトみたいな感じです。
チームラボスキルアップ
実際に作るサイトはここまで大規模な解説サイトではないですし、こんな風にいろいろごちゃごちゃに詰め込むつもりもありません。
サイドバーのイメージこんな感じで、スクロールするたびにサイドバーに自分が読んでる位置が知れたらいいなと思っています。

自己でも色々調べてるのですが、これができそうなjQueryのプラグインとかが見つからず、質問をするに至りました。
別にjQueryだけでなく、reactやvueでもいいです。

miyabi_pudding

2019/06/05 00:54 編集

プラグインじゃ見つからないでしょうね・・・。 reactはじめ、Angularなどのフレームワークでも、標準であるとは思えません。（つまりプラグインじゃなくて自作になる）そして、その程度のものなら、そのためにフレームワーク入れる方が逆に手間になるかと。自作の方がまだ早そうです。要件確認なのですが、 h2と、h3が同時にビュー範囲内の時には、どちらを"←今ここ"にするイメージでしょうか？必ずしも、一個の項目が、ページいっぱいの高さとは限らないと思うので。また、自分でここまで作ったなどあればソースコード載せていただければと思います。（なければ、ないなりの回答をさせていただきます）