滚动时scrollY值波动致Sticky头部抖动问题求助

问题根源 #

你遇到的抖动是因为Header高度变化会改变页面总高度，导致window.scrollY值在50上下反复横跳——当Header缩小，页面高度突然减少，scrollY会被“拉低”到50以下，代码又把Header恢复原高度，页面高度回升，scrollY又超过50，循环往复就出现了抖动。

修复方案 #

最简单的解决方式是设置触发和恢复的不同阈值，给scrollY留一个缓冲区间，避免临界值反复触发。比如：

• 当滚动超过60px时，添加scrolled类
• 当滚动回落到30px以下时，移除scrolled类

修改后的JS代码：

let header = document.querySelector('.header');
let img = document.querySelector('.headerImg');

window.addEventListener('scroll', () => {
  // 触发缩小的阈值设为60，恢复的阈值设为30，拉开差距
  if (window.scrollY > 60) {
    header.classList.add('scrolled');
    img.classList.add('imgScrolled');
  } else if (window.scrollY < 30) {
    header.classList.remove('scrolled');
    img.classList.remove('imgScrolled');
  }
  // 中间30-60的区间不做任何操作，避免反复切换
});

额外优化建议 #

1. 防抖处理：滚动事件会频繁触发，加个防抖能减少性能消耗，避免不必要的DOM操作：

let header = document.querySelector('.header');
let img = document.querySelector('.headerImg');
let scrollTimeout;

window.addEventListener('scroll', () => {
  clearTimeout(scrollTimeout);
  scrollTimeout = setTimeout(() => {
    if (window.scrollY > 60) {
      header.classList.add('scrolled');
      img.classList.add('imgScrolled');
    } else if (window.scrollY < 30) {
      header.classList.remove('scrolled');
      img.classList.remove('imgScrolled');
    }
  }, 50); // 50ms延迟，可根据需求调整
});

2. CSS冗余清理：你的.header和.scrolled里重复写了两次transition，保留一个即可：

.header{
    width: 100%;
    height: 334px;
    max-height: 334px;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out; /* 只保留这一个transition */
    background-image: url(../../view/assets/img/header1.jpg);
    background-position: center -664px;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.scrolled{
    max-height: 141px!important;
    /* 这里不需要重复写transition，会继承.header的设置 */
}

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