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

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>