<分区>
<分区>
我正在用 Bootstrap 4 做一个网站。导航栏的背景颜色是透明的，但是当用户向下滚动时，我希望它的背景颜色变成白色，并有一个柔和的过渡。相反，当导航栏返回时，我需要它的初始状态。是这样的: https://www.w3schools.com/w3css/tryw3css_templates_parallax.htm
我尝试过使用纯 javascript，但代码不起作用。
提前致谢!
JavaScript:
window.onscroll = function() {myFunction()};
function myFunction() {
var navbarClass = document.getElementById("myNavbar").className.split(/\s+/);
for (var i = 0; i < navbarClass.length; i++) {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
navbarClass[i].classList.add("border", "animate-top");
} else if (navbarClass[i].classList.contains("nav")) {
navbarClases[i].classList.toggle("nav-white");
}
}
CSS
.first > div {
color: #fff;
}
section {
height: 350px;
}
.first {
padding-top: 70px;
background-image: url('https://picsum.photos/1920/1080/?random');
height: auto;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.nav {
border: 0;
border-radius: 0;
background: rgba(255, 255, 255, 0.5);
}
.nav-white {
border: 0;
border-radius: 0;
background: rgba(255, 255, 255, 1);
}
.nav-white .navbar-brand {
color: black;
}
.nav-white .navbar-nav li a {
color: black;
}
.nav-white .fa.fa-navicon {
color: black;
}
.border {
box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)
}
.animate-top{
animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}
}
HTML 导航栏
<nav class="navbar navbar-expand-lg fixed-top nav" id="myNavbar">
<a href="#" class="navbar-brand">Menu</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Menu de Navegacion">
<span class="navbar-toggler-icon">
<i class="fa fa-navicon"></i>
</span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a href="#" class="nav-link">TITLE 1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">TITLE 2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">TITLE 3</a>
</li>
</ul>
</div>
</nav>
HTML
<section class="first row">
<div class="col">
<h2>MAIN</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
<section class="row">
<div class="col">
<h2>TITLE 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
最佳答案
当您使用 Bootstrap 时，您可以利用 jQuery。下面的代码是我所做的:
jQuery 根据位置切换滚动类，滚动类只是改变颜色。
$(document).scroll(function () {
$(".fixed-top").toggleClass('scrolled', $(this).scrollTop() > $(".fixed-top").height());
});.fixed-top.scrolled {
background-color:rgba(255,255,255,1) !important;
transition: background-color 200ms linear;
}关于javascript - 如何更改滚动条上的导航栏 css 样式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54117575/