如何在向上或向下滚动时使打开的菜单透明

<nav id="menu">
  <!-- 菜单内容 -->
</nav>

#menu {
  width: 100%;
  height: 50px;
  background-color: #ffffff;
  opacity: 1;
  transition: opacity 0.3s ease;  /* 添加过渡效果 */
}

var menu = document.getElementById("menu");
var lastScrollPosition = window.pageYOffset;  // 记录上一次滚动的位置

window.addEventListener("scroll", function() {
  var currentScrollPosition = window.pageYOffset;  // 获取当前滚动的位置

  if (currentScrollPosition > lastScrollPosition) {
    // 向下滚动
    menu.style.opacity -= 0.1;  // 透明度逐渐减小
  } else {
    // 向上滚动
    menu.style.opacity += 0.1;  // 透明度逐渐增加
  }

  lastScrollPosition = currentScrollPosition;  // 更新上一次滚动的位置
});