[JS]コンテンツの見出しを目次にし、スクロールしてもサイドバーに固定表示されるナビゲーション -Progress Nav

コンテンツの見出しを目次代わりにし、スクロールしてもサイドバーに固定表示されるナビゲーションを実装するJavaScriptのライブラリを紹介します。

ページのスクロールに合わせて、ナビゲーションの現在位置はアニメーションで移動します。

Progress Nav -GitHub

• Progress Navのデモ
• Progress Navの使い方

Progress Navのデモ

去年あたりから、このタイプのナビゲーションが増えてきました。
実際の動作は、下記のデモページでご覧ください。

デモページ

現在位置を示すSVGで実装されており、表示されているコンテンツに合わせてアニメーションで移動します。

表示されているコンテンツすべてにラインを適応

Progress Navの使い方

Step 1: 外部ファイル

当スタイルシート・スクリプトを外部ファイルとして記述します。

Step 2: HTML

ナビーションはリスト要素で、ハイライトをSVGで実装します。