如何在jQuery中仅针对桌面端（宽度>768px）实现滚动添加头部类？

架构老林

2026-7-12

你当前的代码逻辑思路没问题，但存在两个容易忽略的缺陷：

仅在滚动时判断窗口宽度，当用户调整窗口尺寸（比如从大屏拖到小屏）时，即使不滚动，Header的类状态也不会同步更新
页面初始加载时，如果已经处于滚动到102px以下的状态，Header不会自动添加上类

修正后的代码

// 封装处理Header状态的逻辑函数
function updateHeaderScrollClass() {
  const isDesktopViewport = $(window).width() > 768;
  const isPageScrolled = $(window).scrollTop() > 102;

  if (isDesktopViewport && isPageScrolled) {
    $('header').addClass('header-scroll');
  } else {
    $('header').removeClass('header-scroll');
  }
}

// 页面初始化时执行一次，确保初始状态正确
updateHeaderScrollClass();

// 绑定滚动事件
$(window).scroll(updateHeaderScrollClass);

// 绑定窗口尺寸变化事件，处理窗口缩放的情况
$(window).resize(updateHeaderScrollClass);

进一步优化（性能提升）

窗口调整尺寸时会频繁触发resize事件，加上防抖可以减少函数执行次数，避免不必要的性能消耗：

// 防抖工具函数
function debounce(func, delay = 150) {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(func, delay);
  };
}

// 用防抖包装处理函数
const debouncedUpdateHeader = debounce(updateHeaderScrollClass);

// 替换resize事件绑定
$(window).resize(debouncedUpdateHeader);