【发布时间】：2021-11-18 16:44:09
【问题描述】：
我正在构建一个使用 Bootstrap 5 的 Angular 应用程序。我创建了一个透明导航栏，我希望在滚动页面时看到背景颜色从透明变为深色。它不起作用。每次滚动页面时，它仍然使我的导航栏保持透明而不是深色。
我的导航栏代码：
<nav class="navbar fixed-top navbar-expand-lg navbar-dark p-md-3">
<div class="container-fluid">
<a href="#" class="navbar-brand">WorkonPro</a>
<button
type="button"
class="navbar-toggler"
data-bs-target="#navbarNav"
data-bs-toggle="collapse"
arial-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle Navbar"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="mx-auto"></div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active item-space" href="#" aria-current="page"
>Home</a
>
</li>
<li class="nav-item">
<a class="nav-link item-space" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link item-space" href="#"> Healthcare </a>
</li>
<li class="nav-item">
<a class="nav-link item-space" href="#">Tech</a>
</li>
<li class="nav-item">
<a
href="#"
class="nav-link btn btn-sm item-space grey-button"
style="color: #fff"
role="button"
>Login
</a>
</li>
<li class="nav-item">
<a
href="#"
class="nav-link btn btn-sm item-space green-button"
style="color: #fff"
role="button"
><strong>Create account</strong>
</a>
</li>
</ul>
</div>
</div>
</nav>
我为实现这一目标而编写的 JS 脚本。 （请注意，我写了与我的 html 页面相同的正文）
<script src="../../../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script>
var nav = document.querySelector('nav');
window.addEventListener('scroll', function() {
if (window.pageYOffset > 100) {
nav.classList.add('bg-dark', 'shadow');
} else {
nav.classList.remove('bg-dark', 'shadow');
}
});
</script>
我与导航栏有关的风格如下：
.bg-dark {
background-color: #101011 !important;
}
.navbar-dark .navbar-brand {
padding: 20px 0 10px 10px;
color: #fff;
}
.navbar-nav .nav-link {
color: #101011;
}
.navbar-dark .navbar-nav .nav-link {
color: rgba(255, 255, 255, 1);
}
.navbar-dark .navbar-brand {
margin: 0;
width: 50%;
float: left;
display: inherit;
}
.navbar-brand {
color: #101011;
padding: 20px 0 10px 10px;
}
body .navbar {
padding: 6px 0 !important;
}
body .navbar-brand {
background: none;
}
请有人告诉我我做错了什么？我错过了什么？以及我该如何解决它。
提前致谢。
【问题讨论】：
标签： javascript html css bootstrap-4