jQuery检测ScrollTop实现粘性菜单：向上滚动时removeClass触发异常

我完全懂你的困扰——现在的代码只要滚动距离小于50px就会移除sticky类，不管你是向上滚动还是刚从顶部往下滑，这显然不是理想的粘性菜单效果。问题出在你的逻辑只判断了当前滚动位置，没有考虑滚动方向，导致向上滚动时很容易触发移除操作。

修复思路 #

我们需要新增一个变量跟踪上一次的滚动位置，通过对比当前和历史位置判断滚动方向：

• 向下滚动时，当滚动距离超过50px，添加sticky类
• 向上滚动时，除非用户几乎回到页面最顶部（比如滚动距离小于10px），否则保留sticky类，避免稍微向上滚一点菜单就消失

修正后的代码 #

// 存储上一次的滚动位置，初始值设为0
let lastScrollTop = 0;

$(window).bind('scroll', function() {
    const scrollTop = $(window).scrollTop();
    
    // 判断滚动方向
    if (scrollTop > lastScrollTop) {
        // 向下滚动逻辑：超过50px就添加粘性类
        if (scrollTop > 50) {
            $('.menu').addClass('sticky');
        }
    } else {
        // 向上滚动逻辑：只有回到顶部附近才移除类
        if (scrollTop < 10) {
            $('.menu').removeClass('sticky');
        }
    }
    
    // 更新上一次的滚动位置，供下一次判断使用
    lastScrollTop = scrollTop;
});

为什么这样有效？ #

• 通过lastScrollTop和当前scrollTop的对比，我们能精准区分向上/向下滚动的行为
• 向上滚动时放宽了移除类的条件，只有当用户回到页面最顶端时才取消粘性，完美解决你遇到的问题

额外优化小建议 #

• 若你的菜单有固定高度，建议给菜单的父元素或页面顶部添加和菜单高度一致的padding-top，避免添加sticky类后页面内容突然跳变
• 可以给scroll事件加个节流处理，减少事件触发频率，提升页面性能：

  // 简单的节流函数
  function throttle(func, delay) {
      let timer = null;
      return function() {
          if (!timer) {
              timer = setTimeout(() => {
                  func.apply(this, arguments);
                  timer = null;
              }, delay);
          }
      };
  }
  
  // 用节流绑定scroll事件，延迟100ms触发一次
  $(window).bind('scroll', throttle(function() {
      // 这里放入上面的滚动判断逻辑
  }, 100));
  

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