【Progress Nav】ついてくる目次をサクっと

どうもこんにちは塚本です。

今日も、備忘録として、ブログを投稿させて頂きます。

長いページだと目次があると思うんですが、
スクロールしているときに目次がハイライトされると分かりやすくて良いですよね！

サクッと導入できるものはないかな～と調べてみると見つかったのがコチラの記事になります。
スクロールしてもナビゲーションでどこを読んでいるかわかるJavaScript「Progress Nav」

早速、導入をさせて頂きました！

Progress Nav

Progress Nav とはその名の通り、進捗をナビしてくれるものです。
ページをスクロールしているときに、ナビゲーションで今どこを読んでいるかを分かるようにしてくれます。

Wikipediaとか、目次がついていますが、
読んでるときについてきてくれたらな～ってよく思っていました、、（特に学生時代）

デモ

文章力が無いので、今までの説明で分かってもらえたか心配ですがデモを見てもらうと分かると思います！
スクロールしていくと、右上の目次の部分のバーが動いてくれていると思います。

See the Pen
Progress nav by tsukamoto (@tsukamoto)
on CodePen.

こちらのデモの文章はLorem Ipsum、画像は lorempixelを使っています。

モックサイト等を作るときに便利なので、
適当に文章と画像が欲しいときに使ってみて下さいm(_ _)m