在页面滚动后更改元素的不透明度

Question

我的网站中有一个标题，当用户位于网站顶部时，它是透明的，但当用户滚动到页面的某个高度时，我想将其不透明度更改为50%，我该怎么做？

.navbar_outline{
background-color: yellow;
border-radius: 50px;
top: 10px;
width: 1300px;
height: 70px;
position: absolute;
position: fixed;
margin-left: 35px;
opacity: 50%;
}

Answer 1

当用户滚动足够时，您可以使用window.scrollY功能向导航栏添加一个类。

if (window.scrollY>500) {
var nav = document.getElementById("navbar");
nav.classlist.add("reduced-opacity");
}

然后是css：

.reduced-opacity{
opacity:.5;
}

document.addEventListener('scroll', function(e) {
if (window.scrollY>500) {
var nav = document.getElementById("nav");
nav.classList.add("reduced-opacity");
}
});

#main{
height:600vh;
background:lightblue;

}
#nav{
width:100%;
height:10vh;
background:red;
position:sticky;
top:10px;
}
.reduced-opacity{
opacity:.5;
}

<div id="main">
<div id="nav">
</div>
</div>