我有一个导航栏，它使用一些 CSS 来更改不透明度：
.navbar {
background-color: #4B5253;
opacity: 0.8;
filter: alpha(opacity = 80);
}
我需要opacity改为1.0当用户向下滚动一定数量的像素后，例如，500px.
我正在使用 jQuery，但我没有找到解决方案。
另外，我不擅长 JavaScript，有时我不知道应该把代码放在哪里。因此，如果有什么方法可以用 CSS 来完成这一切，那就太棒了！
这是我想要的一个例子- 向下滚动时请密切注意标题。
如果您想要本机解决方案，请使用：
function changeCss () {
var bodyElement = document.querySelector("body");
var navElement = document.querySelector("nav");
this.scrollY > 500 ? navElement.style.opacity = .8 : navElement.style.opacity = 1;
}
window.addEventListener("scroll", changeCss , false);
这是一个现场演示
function changeCss () {
var bodyElement = document.querySelector("body");
var navElement = document.querySelector("nav");
this.scrollY > 500 ? navElement.style.opacity = .8 : navElement.style.opacity = 1;
}
window.addEventListener("scroll", changeCss , false);
body{
background-color: white;
height: 1000vh
}
nav{
position:fixed;
top:0;
left:0;
width:100%;
text-align: center;
background: blueviolet
}
nav li{display: inline-block}
nav a{
padding: 10px 12px;
color: white;
text-transform:uppercase;
text-decoration: none
}
<nav class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
