導入
ブログを書くとき、多くの字幕が組織によく使用されます。記事が長い場合、異なるタイトル間を行き来する必要があります。ディレクトリを手動で追加してアンカーポイントを追加すると、本当に面倒です。このため、ディレクトリ領域を動的に生成し、Bootstrapが提供するAffixプラグインを使用して、ページ上のディレクトリ領域を修正できます。 Bootstrapドキュメントで使用します
準備 - bootstrap.min.jsの紹介
bootstrap.min.jsをボディの前にスクリプトタグに入れ、uikit.min.jsは当面は紹介されません。
関連するプラグインを導入した後、私たちのアイデアは、最初に記事に基づいてアンカーポイントとメニューコンテンツを自動的に自動的に生成し、それに固定効果を生成し、UIKITのscrollspyプラグインを使用することです（ブートストラップにScrollspyもあり、使用方法はほぼ同じです）。
Affixの使用を学習することを紹介します
Affixプラグインは、ナビゲーションパーツの位置を修正し、ユーザーのスクロール状況に応じて固定要素に垂直オフセットを追加し、NAVが3つのクラス間を切り替えるようにするのに役立ちます。
1.Affix-Top：上部を示します
2.Affix：ページ上でスクロールし、固定属性を追加し、カスタムオフセットを使用することを意味します
3.Affix-bottom：底に到達することを意味します
fixを有効にするには、次のコードのみが必要です。
$（ '＃nav'）。
1。HTMLコードパーツを整理します
<ul id = "mysidebar"> </ul>
ULのNAVクラスと接辞クラスを必ず追加してください。
2。カプセル化コードを生成します
このコードスニペットを独自のスクリプトスクリプトに紹介します
; $。fn.extend（{"createaffix"：function（selector）{$ list = $（ "" + selector）、length = $ list.length、length、uffixvalue = ""; for（var i = 0; i <length; i ++）{// add name属性$ list.eq（i）.attr（ "id"、（ " + i）; $ list.eq（i）.text（）; this.append（affixvalue）;上記のコードの原則は、createaffix関数のタイトルユニットと見なす必要があるタグまたはクラスを渡し、横断プロセス中にアンカーリンクを追加することです。
3。使い方
HTMLパーツの書き込み
<ul id = "mysidebar"> <li> <a href = "＃node1"> </a> </li> <li> <a href = "＃node2"> </a> </li> <li> <a href = " 2 </h3> <h3 id = "node3">タイトル3 </h3>
JavaScriptセクションを書く
$（function（）{$（ '#mysidebar'）。createaffix（ 'h3'）; //記事では、「h3」タグをアンカーに追加する必要があることを示します。}）;アンカーポイントオフセットの問題を解決します
アンカーポイントはデフォルトでページをアンカー要素の上部にシフトするため、つまり、上記の操作をタイトル1で行うと、アンカーポイントをクリックすると、ページは「タイトル1」がある上位の位置にシフトします。上部にメニューバーがある場合、CSSスタイルを設定することでブロックされ、解決されます。
.class { /*パディングを追加すると、アンカーがnum pxを下にシフトします。つまり、メニューバーの高さをスキップします。マージントップを負の値に設定することにより、パディングトップによって引き起こされる空白の部分を補う*/パディングトップ：num px;マージントップ：-num px;}スクロールリスニングを追加します
現在、私たちのDOMドキュメントはこのようなものです。
<ul id = "mysidebar"> <li> <a href = "＃node1"> </a> </li> <li> <a href = "＃node2"> </a> </li> <li> <a href = "＃node3"> </a> </li> </ul>
処理し、UIKIT属性を紹介し、詳細についてはドキュメントを確認してください
<ul id = "mysidebar" data-uk-scrollspy-nav = "{coldest： 'li'、smoothscrool：true}"> <li> <a href = "＃node1"> </a> </li> <li> <a href = "＃node2"> </a>uikit.min.jsを紹介します
メニュー項目（LI）はドキュメントのロード後に実行されるため、メニュー項目が生成される前にUIKITのscrollspyが実行される場合、それは間違いなく機能しません。したがって、メニュー項目が生成されたら、uikit.min.jsを導入する必要があります。コードは次のとおりです。
$（function（）{$（ '#mysidebar'）。createaffix（ 'h3'）; // generate menuate $ .getscript（ "uikit.min.js"）; // uikit.min.jsを非同期にロードし、スクロール監視が有効になります。}）;