我希望我的导航栏是透明的,但是当用户滚动一点时我希望它变成纯色并且我正在为导航栏使用 bootstrap,我已经用 javascript 完成了所需的代码。
我的 HTML 文件中有这个 javascript,但它似乎不起作用,我也不知道为什么
<script>
var myNav = document.getElementById("mynav");
window.onscroll = function() {
use strict";
if (document.body.scrollTop >= 100) {
myNav.classList.add("scroll");
} else {
myNav.classList.remove("scroll");
}
};
</script>
我还添加了 CSS 代码。
.scroll {
background-color: transparent !important;
transition: all 0.5s ease-in;
}
我不知道为什么它不起作用,它没有显示任何错误,我还手动放置了类并且它起作用了,所以问题出在 js 代码而不是 CSS。
最佳答案
使用 Window 对象的 scrollY
属性。
请参阅下面的代码段:
var myNav = document.getElementById("mynav");
window.onscroll = function() {
if (window.scrollY >= 100) {
myNav.classList.add("scroll");
} else {
myNav.classList.remove("scroll");
}
};
.scroll {
background-color: transparent !important;
transition: all 0.5s ease-in;
}
.main-container{
height: 1000px;
}
#mynav{
position: fixed;
background-color: gray;
height: 50px;
margin:0 auto;
top: 0;
bottom:0;
line-height: 50px;
padding:5px;
width: 100%;
}
<div class="main-container">
<div class="mynav" id="mynav">
Hello World! this is mynav
</div>
</div>
关于javascript - 滚动后如何更改导航栏的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57151554/