Bootstrap 4.0 scrollspy不工作，沒有改變活動菜單項目

我使用Bootstrap 4.0創建一個簡單的登陸頁面，並在此頁面使用ScrollSpy但我無法使它工作，它不會改變活動菜單項。Bootstrap 4.0 scrollspy不工作，沒有改變活動菜單項目

的index.html -

<body> 

<!-- Navbar --> 
<nav id="main-nav" class="navbar navbar-expand-lg bg-light bg-transparent fixed-top"> 
    <div class="container"> 

     <a class="navbar-brand" href="#"><!-- some logo --></a> 

     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
      <span class="navbar-toggler-icon"></span> 
     </button> 

     <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent"> 
      <ul class="navbar-nav"> 
       <li class="nav-item"><a class="nav-link" href="#header">Home</a></li> 
       <li class="nav-item"><a class="nav-link" href="#book">About Book</a></li> 
       <li class="nav-item"><a class="nav-link" href="#author">About Author</a></li> 
       <li class="nav-item"><a class="nav-link" href="#inspire">Inspire</a></li> 
      </ul> 
     </div> 

    </div> 
</nav> 

<!-- Header --> 
<header id="header" class="header"> 
    <!-- some content --> 
</header> 

<!-- About book --> 
<section id="book" class="book py-5"> 
    <!-- some content --> 
</section> 

<!-- About author --> 
<section id="author" class="author py-5"> 
    <!-- some content --> 
</section> 

<!-- Inspire --> 
<section id="inspire" class="author py-5"> 
    <!-- some content --> 
</section> 

<!-- JavaScript --> 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/main.min.js"></script> 
</body>

我有body{postsition: relative}在我style.css文件。

main.js -

$(document).ready(function() { 

    // Scroll spy 
    $('body').scrollspy({ 
     target: "#main-nav", 
     offset: 70 
    }); 

    // Navbar fade 
    changeNavbar(); 

    $(window).scroll(function() { 
     changeNavbar(); 
    }); 

    function changeNavbar() { 
     var navbar = $("#main-nav"); 
     if ($(this).scrollTop() >= 100) { 
      navbar.addClass("bg-light").removeClass("bg-transparent"); 
     } else if ($(this).scrollTop() < 100) { 
      navbar.removeClass("bg-light").addClass("bg-transparent"); 
     } 
    } 
});

我搜索了很多，但沒有得到任何解決方案，已經浪費了幾個小時，任何幫助將不勝感激。

在此先感謝。

來源

2017-09-02 Darpan

的ScrollSpy組件應用active類爲nav-item，但你不能看到它，因爲你沒有在導航欄navbar-light類。適用風格（較暗的文本顏色）

的引導4 CSS選擇器是這樣的：

.navbar-light .navbar-nav .nav-link.active { 
    color: rgba(0, 0, 0, 0.9); 
}

所以，只需添加navbar-light類是這樣的：

<nav id="main-nav" class="navbar navbar-expand-lg navbar-light bg-light bg-transparent fixed-top"> 
</nav>

演示：https://www.codeply.com/go/ic6Md3e4y1

來源

2017-09-02 12:36:11 ZimSystem

Bootstrap 4.0 scrollspy不工作，沒有改變活動菜單項目

回答

相關問題