滚动量较小时粘性导航（sticky nav）滚动动画异常问题

这个弹跳问题的核心原因是：修改导航栏height会改变页面总布局高度，浏览器会自动调整滚动位置，导致小滚动量下scrollY被重置为0，触发导航栏在高低状态间反复切换。

下面是不用fixed定位、占位元素或固定高度的解决方案：

核心方案：用CSS Transform替代height修改 #

Transform不会改变元素的布局占用空间，页面总高度不会变化，自然不会触发滚动位置的异常重置。

修改后的完整代码：

window.onscroll = function() {
  const nav = document.getElementById('dojo-nav');
  if (window.scrollY > 0) {
    nav.style.transform = 'scaleY(0.25)'; // 200px * 0.25 = 50px，对应原高度比例
    nav.style.transformOrigin = 'top center'; // 从顶部开始缩放，避免导航内容偏移
  } else {
    nav.style.transform = 'scaleY(1)';
  }
};

body {
  margin: 0;
}

#dojo-nav {
  transition: transform 0.2s ease-in; /* 只针对transform做过渡，更高效 */
  position: sticky;
  top: 0;
  background: violet;
  height: 200px;
}

<div id="dojo-nav"></div>
<div style="height:50vh;background-color: cyan;"></div>
<div style="height:100vh;background-color: orange;"></div>

可选优化：添加滚动方向判断 #

如果想让导航栏只在向下滚动时缩小，向上滚动到顶部才恢复（避免滚动过程中反复切换），可以记录上一次滚动位置：

let lastScrollPos = 0;
window.onscroll = function() {
  const nav = document.getElementById('dojo-nav');
  const currentPos = window.scrollY;
  
  if (currentPos > lastScrollPos && currentPos > 0) {
    // 向下滚动且不在顶部
    nav.style.transform = 'scaleY(0.25)';
    nav.style.transformOrigin = 'top center';
  } else if (currentPos === 0) {
    // 回到顶部时恢复原高度
    nav.style.transform = 'scaleY(1)';
  }
  
  lastScrollPos = currentPos;
};

这样就能彻底解决小滚动量下的弹跳问题，同时保留sticky定位的原生特性。

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