jQuery scroll事件向下滚动加类 回顶部无法移除类问题排查

• 你写的滚动判断逻辑本身不存在语法错误，异常是几个场景叠加导致的：
  1. 调试用的alert本身会干扰滚动逻辑：原生弹窗弹出时会强制抢占页面焦点，自动把页面滚动位置重置到顶部，这时候scrollTop瞬间变为0自然会进入else分支触发弹窗，和你向下滚动的操作无关，属于调试手段引入的额外异常。调试滚动逻辑统一用console.log打印参数即可，不要用alert、confirm这类会阻塞页面、触发滚动重置的原生弹窗。
  2. 50px的触发阈值距离顶部过近，很容易出现临界值抖动：你给底部fixed元素写的.show类，本质是控制元素从视口外（通常是bottom: -元素高度的隐藏状态）滑动到视口内（bottom: 0的显示状态）。如果你为了防止fixed元素遮挡页面内容，给body设置了和元素等高的底部padding，且这个padding是跟着show类同步添加/移除的，那么当你滚动到50px临界值附近时，会出现循环触发的问题：
     • 滚动到scrollTop=49px时，触发逻辑移除show类，同步移除body的底部padding，页面总高度瞬间减少（减少值等于fixed元素高度），原本的scrollTop=49会被自动抬升，又超过50px阈值
     • 超过阈值后又触发逻辑加回show类，加回body的padding，页面高度恢复，scrollTop又跌回50px以下
     • 整个过程会在临界值反复横跳，根本无法顺利触发滚到顶部的移除逻辑，看起来就是类加得上、删不掉。
  3. 你写的第二段3000px阈值的代码能正常运行，核心原因是阈值离顶部足够远，类切换带来的页面高度微小变化，根本不会让scrollTop波动到3000px的临界位置，不会出现循环触发的抖动，所以逻辑能正常执行。

• 第一步：先删掉所有scroll事件回调里的alert、confirm类弹窗，改用控制台打印调试。
• 第二步：给显示/隐藏逻辑设置阈值差，留出缓冲区间避免临界值抖动，不要用同一个数值作为加类、减类的判断阈值。
  修复后的参考代码：

  $(window).on('scroll', function () {
    const currentScrollTop = $(this).scrollTop();
    // 滚动超过50px时加类显示
    if (currentScrollTop > 50) {
      $("#legalNotice").addClass("show");
    } 
    // 滚动到距离顶部不足30px时才移除类隐藏，留20px的缓冲区间
    else if (currentScrollTop < 30) {
      $("#legalNotice").removeClass("show");
    }
  });
  

• 第三步：如果滚动触发频率太高导致判断不稳定，可以给scroll事件加简单的节流控制，每16ms（对应屏幕60帧刷新率）最多执行一次判断即可，不需要每次滚动像素变化都执行逻辑。
• 额外优化：如果给body加了底部padding防止fixed元素遮挡内容，建议把这个padding设为固定值，不要跟着show类同步切换，从根源上避免类切换时页面总高度突变导致的scrollTop跳变。

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