Chrome下滚动至收缩阈值时导航菜单闪烁问题求助

你遇到的这个问题我太熟悉了！在Chrome里慢速滚动到阈值点时页眉闪烁，本质是高频触发的scroll事件导致类名反复被添加移除，浏览器频繁重绘引发的。

问题场景复盘 #

当滚动到300px这个「收缩点」时，页眉会因为代码反复给它加/删small类而闪烁，而且只在Chrome 86.0.4240.111版本、慢速滚动时才会出现。你原来的实现代码是这样的：

/* === Shrink Header on Scroll === */
var header = $('.site-header');
$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if ( scroll >= 300 ) {
    header.addClass('small');
  } else {
    header.removeClass('small');
  }
});

问题根源 #

为啥偏偏Chrome会出这个问题？因为当你慢速滚动时，scrollTop的值可能会在300这个临界点上下跳动（比如299→300→299），而scroll事件会在每一次滚动像素变化时都触发，这就导致代码反复执行addClass和removeClass——浏览器每次修改类名都要重新计算样式、重绘元素，高频操作下就出现了肉眼可见的闪烁。

两种靠谱的修复方案 #

方案1：添加状态判断，避免重复DOM操作

最简单的优化思路就是在修改类名前先检查当前状态，只有类名不匹配的时候才执行操作，减少不必要的浏览器重绘：

/* === 修复版：收缩页眉逻辑 === */
var header = $('.site-header');
$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= 300) {
    // 只有当前没有small类时才添加
    if (!header.hasClass('small')) {
      header.addClass('small');
    }
  } else {
    // 只有当前有small类时才移除
    if (header.hasClass('small')) {
      header.removeClass('small');
    }
  }
});

方案2：用防抖函数降低事件触发频率

如果想从根源上减少scroll事件的触发次数，可以用**防抖（debounce）**函数——它会让回调函数在滚动停止后延迟一段时间再执行，避免高频触发导致的重复操作。先实现一个防抖工具函数，再应用到滚动逻辑上：

// 定义防抖函数：wait是延迟执行的毫秒数
function debounce(func, wait) {
  let timeoutId;
  return function() {
    const context = this;
    const args = arguments;
    // 每次滚动都清除之前的定时器
    clearTimeout(timeoutId);
    // 重新设置定时器，滚动停止wait毫秒后执行回调
    timeoutId = setTimeout(() => func.apply(context, args), wait);
  };
}

// 应用到页眉收缩逻辑
var header = $('.site-header');
const handleScroll = debounce(function() {
  const scroll = $(window).scrollTop();
  // 用toggleClass的第二个参数简化逻辑：条件为真添加类，否则移除
  header.toggleClass('small', scroll >= 300);
}, 15); // 15ms的延迟，可根据你的需求调整

$(window).scroll(handleScroll);

额外优化提示 #

如果你的small类用到了CSS过渡（transition），可以确保过渡时长不要过短（比如不要小于10ms），让页眉的收缩/展开效果更顺滑，也能进一步弱化闪烁感。

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