我無法使scrollspy與我的引導導航欄一起使用

Question

我知道這是一個非常常見的問題，但是我花了大約兩天時間在各個論壇上進行爬網，嘗試解決問題，似乎找不到答案。

我有一個使用一些視差滾動的標准引導程序設置。 我的導航欄固定在頁面底部。 每個<li>的形狀像一個圓形，並且<li>是一個<a>標記。 每個“圓形” <li>都鏈接到頁面上的定位標記，以便提供頁面導航。 這是一個一頁的模板設置。

這是一個小提琴： https : //jsfiddle.net/k8g3qydw/1/

我已經正確地data-target=".scrollspy" data-spy="scroll" data-offset="0"了bootstrap.css和.js文件，我在body標簽中添加了data-target=".scrollspy" data-spy="scroll" data-offset="0"並將類.scrollspy添加到了父級我的<ul>元素如下所示：

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

所以，我對如何做感到很困惑！

任何幫助深表感謝！

Answer 1

您的代碼中存在多個錯誤。

1. 您應該使用一種方法（通過數據屬性或 JavaScript）將Bootstrap ScrollSpy添加到頁面中，而不是同時添加到頁面中。 因此，您應該刪除身體屬性或javasript行$('body').scrollSpy({...});

2. ID屬性對於整個文檔必須是唯一的。 您在頁面上有重復的ID。 和..在錯誤的地方。 在工作時，＃spy被分配給nav包裝器，因為它正在被監視。

3. <a name="service">鏈接應指向“可解析的ID目標”，而不是<a name="service"> 。 您應該使用<a id="service"> 。

4. 並且還要確保bootstrap.min.js包含在文檔中的jQuery之后。 由於Bootstrap需要jQuery，因此無需其他方法。

這是一個正在工作的JSFiddle