时间戳

首页 > 解决方案 > 开始向下滚动后更改菜单背景不透明度

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

问题描述

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

在 CSS 中，我使用它使菜单在移动设备上浮动：

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

它正在工作，但我想在开始向下滚动后给菜单一点透明度。我怎样才能做到这一点？

标签： javascriptjqueryhtmlcss

解决方案

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

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

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>

推荐阅读