我正在使用 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");
}
}
});
我搜索了很多但没有得到任何解决方案，已经浪费了几个小时，我们将不胜感激。
提前致谢。
最佳答案
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>
关于jquery - Bootstrap 4 scrollspy 无法更改事件的导航栏项目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46012259/