基于滚动行为控制导航显隐的Vanilla JS代码问题排查

需求概述 #

• 滚动超过导航元素后，添加类使其固定但不可见
• 停止滚动时添加类让其过渡显示
• 再次滚动时移除类让导航隐藏

原代码问题排查 #

原代码的核心逻辑缺陷：

1. 滚动事件触发时，先判断timer存在就立即移除固定类并添加隐藏类，随后清除定时器，导致刚触发的显示逻辑被直接取消
2. 紧接着又重新创建定时器，造成滚动过程中定时器反复被清除重建，出现导航刚显示就消失的闪烁问题
3. 未完善滚动回导航上方时的状态重置逻辑

修复后的代码实现 #

const mobileToolbar = document.querySelector(".mobile-toolbar");
const toolbarTopOffset = mobileToolbar.offsetTop + 50;
let scrollTimer = null;

window.addEventListener("scroll", () => {
  const currentScrollY = window.scrollY;

  // 每次滚动先清除之前的定时器，避免延迟逻辑干扰
  if (scrollTimer) {
    clearTimeout(scrollTimer);
  }

  if (currentScrollY > toolbarTopOffset) {
    // 滚动超过导航时，先固定并隐藏
    mobileToolbar.classList.add("mobile-toolbar--fixed");
    mobileToolbar.classList.add("mobile-toolbar__hidden");

    // 停止滚动400ms后显示导航
    scrollTimer = setTimeout(() => {
      mobileToolbar.classList.remove("mobile-toolbar__hidden");
    }, 400);
  } else {
    // 滚动回导航上方，重置所有状态
    mobileToolbar.classList.remove("mobile-toolbar--fixed");
    mobileToolbar.classList.remove("mobile-toolbar__hidden");
  }
}, false);

逻辑说明 #

• 滚动触发时优先清除旧定时器，确保状态切换不受延迟任务干扰
• 滚动超过导航位置：先给导航添加固定类和隐藏类，保证它处于固定位置但不可见；停止滚动后，延迟400ms移除隐藏类实现过渡显示
• 滚动回导航上方：直接移除固定和隐藏类，恢复导航初始状态
• 再次滚动时，会立即触发隐藏逻辑，符合需求

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