滚动切换header样式功能桌面端正常、移动端失效问题咨询

问题1：媒体查询判断逻辑完全失效 #

你写的if(window.matchMedia("(min-width: 768px)"))是错误写法：window.matchMedia返回的是MediaQueryList对象，不是布尔值，对象转布尔值永远为true，所以不管屏幕宽度是多少，这段代码都会执行，这就是你尝试在移动端停用脚本不生效的核心原因。正确写法需要取返回对象的matches属性：

if(window.matchMedia("(min-width: 768px)").matches) {
  // 仅宽度>=768px时执行的代码
}

问题2：滚动事件绑定对象不兼容移动端 #

移动端浏览器中，document的scroll事件很多时候不会正常触发，滚动事件统一绑定到window对象兼容性更好。同时你绑定了3个独立的scroll事件，不仅性能冗余，移动端低性能环境下也可能出现触发异常，建议合并为同一个事件回调。

问题3：滚动高度取值兼容性差 #

$(document).scrollTop()在部分移动端浏览器中取值异常，替换为$(window).scrollTop()兼容性更稳定。

修复后参考代码 #

// 先判断屏幕宽度，仅桌面端执行逻辑
if(window.matchMedia("(min-width: 768px)").matches) {
  $(function () {
    // 缓存DOM对象，避免滚动时重复查询
    const $header = $(".header");
    const $logo = $(".logo");
    const $menu = $(".menu");
    // 统一绑定window的scroll事件
    $(window).scroll(function () {
      const scrollTop = $(this).scrollTop();
      $header.toggleClass('scrolling-active', scrollTop > $header.height());
      $logo.toggleClass('scrolling-logo', scrollTop > $logo.height());
      $menu.toggleClass('scrolling-menu', scrollTop > $menu.height());
    });
  });
}

额外排查建议 #

如果修复后还有问题，可以按以下步骤排查：

• 检查移动端.header/.logo/.menu的高度计算是否符合预期，部分移动端布局下元素高度可能为0（比如子元素浮动未清除、用了fixed定位脱离文档流等），导致阈值判断失效
• 确认移动端没有其他JS代码冲突，比如你提到的AOS动画库，部分动画库会修改滚动相关逻辑，可以临时注释AOS相关代码验证是否冲突
• iOS Safari下可以添加touchmove事件的兜底监听，避免滚动回弹时事件丢失

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