Javascript 开始向下滚动后更改菜单背景不透明度

我尝试了很多代码片段来实现这一点，但没有任何效果

在CSS中，我使用它使菜单在手机上浮动：

@media screen and (max-width: 900px){
   header#s5_header_area1 {
      position: sticky;
      top: 0;
      z-index: 2;
  }
}

---

这是工作，但我想给菜单一点透明度后，我开始向下滚动。如何执行此操作？

当用户滚动时，它将对菜单应用类

.menu--alt

，否则它将只使用类

.menu

更新CSS应该做你想做的事情。回到你的问题，你会想用javascript编辑

header#s5_header_area1

的样式-下面的示例的简单重构就可以了

const menu=document.querySelector（“.menu”）；
document.addEventListener（“滚动”（（）=>{
//将document.documentElement用于chrome、firefox、ie或opera
//safari的document.body，因为在这些浏览器中设置了溢出
如果（document.documentElement.scrollTop>0）
menu.classList.add（“menu--alt”）；
其他的
menu.classList.remove（“menu--alt”）；
});
.content{
高度：2000px；
背景：粉红色；
}
.菜单{
背景色：#000；
颜色：#fff；
位置：固定；
排名：0；
左：0；
填充：20px；
框大小：边框框；
}
.菜单--alt{
不透明度：0.5；
}

菜单（不可单击）-滚动查看不透明度更改
你好
当用户滚动时，它将对菜单应用class
.menu--alt
，否则它将只使用class
.menu

更新CSS应该做你想做的事情。回到你的问题，你会想用javascript编辑
header#s5_header_area1
的样式-下面的示例的简单重构就可以了


const menu=document.querySelector（“.menu”）；
document.addEventListener（“滚动”（（）=>{
//将document.documentElement用于chrome、firefox、ie或opera
//safari的document.body，因为在这些浏览器中设置了溢出
如果（document.documentElement.scrollTop>0）
menu.classList.add（“menu--alt”）；
其他的
menu.classList.remove（“menu--alt”）；
});
.content{
高度：2000px；
背景：粉红色；
}
.菜单{
背景色：#000；
颜色：#fff；
位置：固定；
排名：0；
左：0；
填充：20px；
框大小：边框框；
}
.菜单--alt{
不透明度：0.5；
}

菜单（不可单击）-滚动查看不透明度更改
你好
您的问题已经回答了吗？您的问题已经回答了吗？这对我不起作用，但我将第一行中的“.menu”更改为“#s5_header_area1”。我不知道为什么。我将代码放在index.php的头部，不要放在头部，因为事件侦听器将被添加到null。考虑将JavaScript放在
主体
结束标记之前。它对我不起作用，但我将第一行中的“.menu”改为“#s5_header_area1”。我不知道为什么。我将代码放在index.php的头部，不要放在头部，因为事件侦听器将被添加到null。考虑将JavaScript放在
主体
结束标记之前。