bootstrap 4 beta scrollspy不工作

我意識到這是this question的重複，但給出的答案是沒有使用Scrollspy插件，而是寫出所有的JavaScript來突出顯示滾動上的活動鏈接。bootstrap 4 beta scrollspy不工作

我已經經歷了這個問題的所有其他迭代，我可以找到，但我的代碼看起來與給定的解決方案相同，所以我不確定問題。（大多數其他問題也不能用於引導4測試版，而是更早版本）

我使用的是從this scrolling nav template JavaScript文件下來的時候，你點擊一個鏈接，滾動到的部分。這是有效的，所以鏈接都通過他們的ID正確地連接到部分。

該模板的JS文件具有JS來激活內置滾動條，但它不適用於我。

身體的位置被設置爲相對。 jQuery.js文件放在bootstrap.js文件之前。

我也嘗試了將data-spy和data-target應用於body標記的方法。

我已經設計了.active類，但是在做這個之前和之後，我檢查了我的頁面，並且.active類沒有被應用到鏈接上，因此我不認爲這個問題是相關的到CSS。

這裏是JavaScript：

$('body').scrollspy({ 
    target: '#mainNav', 
    offset: 0 
    });

，代碼：

<nav class="navbar navbar-expand-md navbar-dark fixed-top" id="mainNav" style="margin-bottom:0;padding-bottom:0;"> 
    <div class="container-fluid"> 
    <a class="navbar-brand js-scroll-trigger" href="#page-top"><img class="img-fluid" src="backgroundimages/logoSmall.png"></a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 

    <div class="collapse navbar-collapse" id="navbarResponsive"> 
    <ul class="navbar-nav"> 
     <li class="nav-item navMenuBox"> 
     <a class="nav-link js-scroll-trigger" href="#howto" style="display:block;">How to Use</a> 
     </li> 
     <li class="nav-item navMenuBox"> 
     <a class="nav-link js-scroll-trigger" href="#Mappy" style="display:block;">Map</a> 
     </li> 
     <li class="nav-item navMenuBox"> 
     <a class="nav-link js-scroll-trigger" href="#about" style="display:block;">About</a> 
     </li> 
     <li class="nav-item navMenuBox"> 
     <a class="nav-link js-scroll-trigger" href="#contact" style="display:block;">Contact</a> 
     </li> 
    </ul> 
    </div> 
</div> 
</nav>

來源

2017-09-14 Ailis

SO。爲了解決這個問題，我意識到spyscroll主要依賴於將navbar-dark或navbar-light應用於您的navbar。如果這是在文檔中，它會非常有幫助！儘管我應用了navbar-dark，但由於我假設.active狀態已連接到nav-links或nav-items，因此我對nav-links進行了樣式設置，導致.active狀態無法工作。要解決我的問題，我申請我的自定義樣式的.navbar-dark li a，和我的自定義活動狀態，以

.navbar-dark .navbar-nav .active > .nav-link, 
.navbar-dark .navbar-nav .nav-link.show, 
.navbar-dark .navbar-nav .nav-link.active

（這是從引導CSS拉，我搜索通過它來計算出.active是如何被風格化&只需複製/粘貼這些類到我的自定義CSS文件）

希望這可以幫助別人有類似的問題！

來源

2017-09-14 22:27:09 Ailis

根據所提供的信息，這是很難辨別其中實際問題的來源。我的猜測是，你錯過了來自github的滾動導航模板的依賴關係，但我可能是錯的。

如果您沒有在其package.json文件中包含jQuery.easing，那可能是問題所在。

我已經把你使用的代碼放到了一個codepen項目中，並且能夠使用jQuery 3.2.1和jQuery-easing 1.4.1工作。

您可以瀏覽它here。

來源

2017-09-14 18:20:42 cwanjt

我有jQuery easing包括，它是必要的滾動觸發器。你的例子不適合我嗎？當您點擊鏈接（我也可以開始工作）時，它會將滾動動畫添加到該部分，但當您滾動時指示您位於該部分（滾動位）時鏈接不會更改狀態 – Ailis

好的。在添加不同版本的jQuery時遇到了一些問題。你可以在這裏查看（https://codepen.io/cowanjt/pen/zEGYLQ）。 – cwanjt

你改變了什麼？當我看着你的兩個例子時，插入的javascript文件都是一樣的，我查了一下，我使用的是與你所有文件相同的版本。據我所見，我的代碼與你的代碼相同 – Ailis

bootstrap 4 beta scrollspy不工作

回答

相關問題