logo标签列表

Bootstrap 4滚动监听无法更改活动导航栏项目

jqueryhtmltwitter-bootstrapbootstrap-4scrollspy
10

我正在使用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>

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

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");
        }
    }
});

我搜索了很多但没有找到解决方案，已经浪费了几个小时，任何帮助都将不胜感激。
提前致谢。
3个回答
4
滚动监听组件将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>

Demo: https://www.codeply.com/go/ic6Md3e4y1

3
我花了几天时间尝试解决这个问题！我甚至建立了一个单独的本地网站，并从W3Schools复制代码构建一个干净的页面，但仍然无法使它工作。最终我偶然发现了以下内容：
根据Bootstrap文档(https://getbootstrap.com/docs/4.3/components/scrollspy/)，"当侦测的元素不是时，请确保设置高度并应用overflow-y:scroll;"。
我在具有 data-spy="scroll" data-target="#myScrollspy" 的同一元素中添加了 style="overflow-y: scroll; height: 1500px;"，就可以使其正常工作。神奇的是overflow-y: scroll。没有设置高度会把水平滚动条放在一个丑陋的位置。高度小于屏幕高度也会在其上放置水平滚动条。height: 100%也不起作用。
这里是工作示例：http://www.ladybugsrule.net/BootstrapExamples/ScrollSpy.html
2
只需添加这个Jquery代码。
$(window).scroll(function(){
    $(".nav-item").removeClass("active");
    $(".active").parent().addClass("active");
  })

当与活动的nav-link相关时，它会自动添加和删除nav-item的active类。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接