固定头部下滑动画失效问题求助

嘿，我刚看了你的问题和代码，马上就发现问题出在哪啦！你遇到的“头部直接跳变”问题，核心是把CSS过渡的属性写错了——你用了animation，但实际上应该用transition来实现状态切换的平滑过渡。

错误原因 #

你在header的CSS里写了：

animation: all 3s;

但animation是用来定义关键帧动画的，需要配合@keyframes使用才能生效；而我们需要的是当元素的top属性从0px变为200px（或者反过来）时的平滑过渡效果，这时候应该用transition属性。

修复后的代码 #

CSS 修改 #

把header里的animation替换成transition：

.wrapper {
 height: 3000px; /* TO SIMULATE SCROLLBAR */
 position: relative;
}
header {
 background: red;
 height: 100px;
 width: 100%;
 text-align: center;
 line-height: 100px;
 color: white;
 position:fixed;
 top: 0px;
 transition: all 3s; /* 这里改成transition */
}
header.animation {
 top: 200px;
}

JS 优化（可选） #

另外，jQuery里的bind()方法已经不推荐使用了，建议换成on()；而且滚动事件触发频率很高，最好加个防抖优化，避免性能问题：

$( document ).ready(function() {
  // 防抖函数，减少滚动事件触发频率
  function debounce(func, delay) {
    let timer;
    return function() {
      clearTimeout(timer);
      timer = setTimeout(func, delay);
    }
  }

  $(window).on('scroll', debounce(function () {
 if ($(window).scrollTop() > 300) {
 $("header").addClass('animation');
 } else {
 $("header").removeClass('animation');
 }
  }, 50));
});

为什么这样改？ #

• transition会自动监听元素的CSS属性变化，当top值从0切换到200px时，会在3秒内完成平滑过渡；
• 防抖函数可以避免滚动时事件频繁触发，减少不必要的DOM操作，提升页面性能，长页面里效果更明显。

现在你再测试一下，头部应该就能平滑地上下移动，而不是直接跳变啦！

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