使用position: sticky实现滚动头部收缩时出现抖动问题求助

问题描述 #

使用position: sticky实现滚动时头部收缩效果，头部出现抖动现象；改用position: fixed时效果正常，实现方式为滚动时动态更新header的height样式。

抖动原因 #

核心问题在于position: sticky的定位特性与动态修改高度的交互逻辑冲突：

• sticky元素属于文档流的一部分，它的高度变化会直接影响整个页面的布局，导致页面的滚动位置（scrollY）发生改变。
• 当滚动触发scroll事件修改header高度时，页面布局变化会再次改变scrollY值，进而再次触发scroll事件，形成循环触发，最终表现为头部抖动。
• 而position: fixed元素脱离文档流，它的高度变化不会影响页面布局和scrollY值，因此不会触发循环的scroll事件，效果稳定。

解决方案 #

方案1：用内边距（padding）替代高度变化 #

保持header的高度固定，通过修改内部元素的padding和字体大小来实现收缩效果，避免改变文档流的高度：

#header {
  background-color: #f1f1f1;
  color: black;
  text-align: center;
  font-weight: bold;
  position: sticky;
  top: 0;
  width: 100%;
  transition: 0.2s;
  /* 固定高度 */
  height: 90px;
}

#header .content {
  padding: 10px;
  font-size: 90px;
  transition: 0.2s;
}

useEffect(() => {
  function scrollFunction() {
    const content = document.querySelector('#header .content');
    if (window.scrollY > 50) {
      content.style.padding = '0';
      content.style.fontSize = '45px';
    } else {
      content.style.padding = '10px';
      content.style.fontSize = '90px';
    }
  }

  window.addEventListener('scroll', scrollFunction);
  return () => window.removeEventListener('scroll', scrollFunction);
}, []);

方案2：使用Intersection Observer监听滚动状态 #

通过监听一个固定高度的占位元素，判断是否需要收缩头部，避免直接依赖scrollY值触发循环：

useEffect(() => {
  const observer = new IntersectionObserver(
    ([entry]) => {
      const header = document.getElementById('header');
      if (!entry.isIntersecting) {
        header.style.height = '45px';
      } else {
        header.style.height = '90px';
      }
    },
    { threshold: 1 }
  );

  const placeholder = document.createElement('div');
  placeholder.style.height = '50px';
  document.body.insertBefore(placeholder, document.getElementById('header'));
  observer.observe(placeholder);

  return () => {
    observer.disconnect();
    placeholder.remove();
  };
}, []);

方案3：计算修正后的滚动位置 #

在scroll事件中计算header高度变化带来的scrollY偏移，手动修正滚动位置以避免循环触发：

useEffect(() => {
  let lastHeight = 90;
  function scrollFunction() {
    const header = document.getElementById('header');
    const targetHeight = window.scrollY > 50 ? 45 : 90;
    if (targetHeight !== lastHeight) {
      const delta = targetHeight - lastHeight;
      window.scrollTo(0, window.scrollY - delta);
      header.style.height = `${targetHeight}px`;
      lastHeight = targetHeight;
    }
  }

  window.addEventListener('scroll', scrollFunction);
  return () => window.removeEventListener('scroll', scrollFunction);
}, []);

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