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

Question

我尝试了很多代码片段来执行此操作，但没有任何效果。

在 CSS 中，我用它来使菜单在移动设备上 float :

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

它工作正常，但我想在开始向下滚动后让菜单稍微透明一些。我该怎么做？

Answer 1

当用户滚动时，它将应用类 .menu--alt 到菜单，否则它将只有类 .menu。

更新 CSS 应该会如您所愿。回顾您的问题，您将需要使用 javascript 编辑 header#s5_header_area1 的样式 - 以下示例的简单重构即可完成。

const menu = document.querySelector(".menu");

document.addEventListener("scroll", () => {

  // use document.documentElement for chrome, firefox, ie or opera
  // and document.body for safari since that's where overflow is set in those browsers
  if (document.documentElement.scrollTop > 0)
    menu.classList.add("menu--alt");
  else
    menu.classList.remove("menu--alt");

});

.content {
  height: 2000px;
  background: pink;
}

.menu {
  background-color: #000;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  padding: 20px;
  box-sizing: border-box;
}

.menu--alt {
  opacity: 0.5;
}

<div class="menu">
  menu (not clickable) - scroll to see opacity change
</div>

<div class="content">
  hi there
</div>