Question

我正在使用Bootstrap 4.0创建一个简单的登录页面并在此页面中使用ScrollSpy，但我无法使其正常工作，它不会更改活动菜单项。

index.html -

WITH cte AS (
      SELECT t.*,
             ROW_NUMBER() OVER (PARTITION BY id, status
                                ORDER BY TIME DESC
                               ) AS rn
      FROM MyTable t
     )
SELECT id, TIME, Status 
FROM t
WHERE rn <= 3;

我的<body>  <nav id="main-nav" class="navbar navbar-expand-lg bg-light bg-transparent fixed-top"> <div class="container"> <a class="navbar-brand" href="#"></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 id="header" class="header">  </header>  <section id="book" class="book py-5">  </section>  <section id="author" class="author py-5">  </section>  <section id="inspire" class="author py-5">  </section>  <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}。

main.js -

style.css

我搜索了很多，但没有得到任何解决方案，已经浪费了几个小时，任何帮助将不胜感激。

提前致谢。

Answer 1

ScrollSpy组件正在将active类应用于nav-item，但您无法看到它，因为导航栏中没有navbar-light类。

应用样式（较暗的文本颜色）的Bootstrap 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

Answer 2

我花了几天的时间来解决这个问题！我什至建立了一个单独的本地网站，并从W3Schools复制了代码以构建一个干净的页面，但无法正常工作。我终于遇到了这个问题：

根据引导程序文档（https://getbootstrap.com/docs/4.3/components/scrollspy/），“监视除之外的其他元素时，请确保已设置高度并溢出-y：滚动；已应用。”

我在具有style="overflow-y: scroll; height: 1500px;"的同一元素中添加了data-spy="scroll" data-target="#myScrollspy"，它开始起作用。不可思议的是overflow-y: scroll。不设置高度会将水平滚动条放在丑陋的地方。高度小于屏幕高度时，还会在其上放置水平滚动条。 height: 100%也不起作用。

工作示例在这里：http://www.ladybugsrule.net/BootstrapExamples/ScrollSpy.html

Answer 3

只需添加此Jquery代码

$(window).scroll(function(){
    $(".nav-item").removeClass("active");
    $(".active").parent().addClass("active");
  })

它将参照活动的nav-link自动向nav-item添加和删除活动的类

Bootstrap 4 scrollspy无法更改活动的导航栏项目

3 个答案: