点击菜单时移除onScroll事件的实现方案

你的核心需求是：点击菜单后，菜单区域保持固定显示，不受页面滚动影响。问题出在当前的scroll事件监听器会在菜单打开时仍然修改头部的类，导致菜单触发栏被隐藏。下面是两种简单易理解的解决方案：

方案一：菜单打开时移除滚动监听，关闭时恢复 #

这种方法最直接，菜单打开后完全禁用滚动事件对头部的影响，关闭后恢复正常逻辑。

修改步骤： #

• 把原来匿名的滚动事件回调函数单独命名，这样才能后续移除监听
• 在菜单点击事件里，根据menu-open类的状态，添加/移除滚动监听
• 菜单关闭时重置lastScroll值，避免下次滚动时状态异常

修改后的完整JavaScript代码： #

const header = document.querySelector(".hiding-header");
const triggerMenu = document.querySelector(".page-header .trigger-menu");
const scrollUp = "scroll-up";
const scrollDown = "scroll-down";
let lastScroll = 0;

// 把滚动回调抽成单独函数
function handleScroll() {
  const currentScroll = window.pageYOffset;
  if (currentScroll <= 0) {
    header.classList.remove(scrollUp);
    return;
  }

  if (currentScroll > lastScroll && !header.classList.contains(scrollDown)) {
    header.classList.remove(scrollUp);
    header.classList.add(scrollDown);
  } else if (
    currentScroll < lastScroll &&
    header.classList.contains(scrollDown)
  ) {
    header.classList.remove(scrollDown);
    header.classList.add(scrollUp);
  }
  lastScroll = currentScroll;
}

triggerMenu.addEventListener("click", () => {
  header.classList.toggle("menu-open");
  
  // 判断菜单状态，添加/移除滚动监听
  if (header.classList.contains("menu-open")) {
    window.removeEventListener("scroll", handleScroll);
  } else {
    window.addEventListener("scroll", handleScroll);
    lastScroll = window.pageYOffset; // 重置滚动位置记录
  }
});

// 初始添加滚动监听
window.addEventListener("scroll", handleScroll);

方案二：在滚动事件里判断菜单状态，跳过逻辑执行 #

如果不想移除监听，也可以在滚动回调里加判断：只要菜单是打开状态，就不执行修改头部类的逻辑。

修改后的JavaScript代码（仅修改滚动回调部分）： #

const header = document.querySelector(".hiding-header");
const triggerMenu = document.querySelector(".page-header .trigger-menu");
const scrollUp = "scroll-up";
const scrollDown = "scroll-down";
let lastScroll = 0;

triggerMenu.addEventListener("click", () => {
  header.classList.toggle("menu-open");
});

window.addEventListener("scroll", () => {
  // 菜单打开时直接跳过所有逻辑
  if (header.classList.contains("menu-open")) return;
  
  const currentScroll = window.pageYOffset;
  if (currentScroll <= 0) {
    header.classList.remove(scrollUp);
    return;
  }

  if (currentScroll > lastScroll && !header.classList.contains(scrollDown)) {
    header.classList.remove(scrollUp);
    header.classList.add(scrollDown);
  } else if (
    currentScroll < lastScroll &&
    header.classList.contains(scrollDown)
  ) {
    header.classList.remove(scrollDown);
    header.classList.add(scrollUp);
  }
  lastScroll = currentScroll;
});

为什么这两种方法有效？ #

原来的代码中，菜单打开后，页面滚动仍然会触发scroll事件，给头部添加scroll-down类，导致trigger-menu-wrapper被向上移出视野。上面的两种方法要么直接禁用滚动监听，要么在菜单打开时跳过滚动逻辑，从而保证菜单区域始终固定显示。

内容的提问来源于stack exchange，提问作者John