JS中mediaQuery.addEventListener失效：桌面端导航栏收缩逻辑异常

算力阿峰

2026-8-12

解决方案

问题根源：你的代码仅在视口满足桌面端条件时添加了导航栏收缩逻辑，但当视口缩小到移动端（e.matches为false）时，没有移除之前绑定的滚动事件，也没有重置导航栏状态，导致收缩逻辑依然生效。
修复思路：
1. 抽离独立的导航栏收缩逻辑和滚动监听函数，便于统一管理。
2. 在视口切换到移动端时，主动移除滚动事件监听，并重置导航栏状态。
3. 切换回桌面端时，重置触发标记，确保能重新响应首次滚动。
完整示例代码：

const mediaQuery = window.matchMedia("(min-width: 992px)");
let hasScrolled = false;

// 收缩导航栏的具体逻辑
function shrinkNavbar() {
  document.querySelector(".navbar").classList.add("shrinked");
}

// 首次滚动触发收缩的处理函数
function handleScroll() {
  if (!hasScrolled && window.scrollY > 0) {
    shrinkNavbar();
    hasScrolled = true;
    // 若仅需触发一次，可在此移除监听：window.removeEventListener("scroll", handleScroll);
  }
}

// 视口尺寸变化的处理函数
function handleDeviceChange(e) {
  if (e.matches) {
    // 进入桌面端：重置标记并绑定滚动监听
    hasScrolled = false;
    window.addEventListener("scroll", handleScroll);
  } else {
    // 进入移动端：移除滚动监听并重置导航栏
    window.removeEventListener("scroll", handleScroll);
    hasScrolled = false;
    document.querySelector(".navbar").classList.remove("shrinked");
  }
}

// 初始化执行
handleDeviceChange(mediaQuery);
mediaQuery.addEventListener("change", handleDeviceChange);