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不工作，没有改变活动菜单项目

回答

相关问题