私はブートストラップnavbarで動作するscrollspyを得ることができません

Question

私はこれが非常に一般的な問題であることを知っていますが、私は〜二日間フォーラムをクロールし、修正を試み、答えを見つけることができない。

視差スクロールを使用する標準的なブートストラップ設定があります。私は、ページの下部に固定されたナビゲーションバーを持っています。 <li>は円のような形をしており、<li>の内側には<a>というタグがあります。各「循環」<li>は、ページ上のナビゲーションを提供するために、ページ上のアンカータグにリンクされています。これは、1ページのテンプレートセットアップです。ここで

はフィドルです： https://jsfiddle.net/k8g3qydw/1/

私は適切にキューに入れbootstrap.cssとの.jsファイルを持って、私はbodyタグにdata-target=".scrollspy" data-spy="scroll" data-offset="0" を追加しましたので、私のよう<ul>の親要素にクラス.scrollspyを追加しました：

<div class="scrollspy board-inner"> 
    <ul class="nav nav-tabs" id="myTab"> 
     <div class="liner"></div> 
      <li class="nav-item active"> 

だから私は何をすべきかについてかなり混乱しています！

ご協力いただきありがとうございます。

Answer 1

コードに複数の間違いがあります。データはまたは JavaScriptを属性経由 ：あなたがあなたのページにブートストラップScrollSpyを追加するための一つの方法ではなく、両方を使用する必要があります

1. 。したがって、身体の属性やjavasriptの行を削除する必要があります。$('body').scrollSpy({...});

2. ID属性は、ドキュメント全体に対して一意である必要があります。あなたはページにIDを繰り返しています。そして..間違った場所に。動作中のフィドル#spyはスパイされているので、navラッパーに割り当てられました。

3. Navbarリンクは<a name="service">の代わりに "解決可能なIDターゲット"を指す必要があります。 <a id="service">を使用してください。

4. bootstrap.min.jsが文書内にjQueryの後に含まれていることを確認してください。 BootstrapにはjQueryが必要なので、他の方法ではありません。ここで

は作業JSFiddle

です