固定标题 - 在动画中滑动不起作用

Question

第一次在这里发帖，因为我对这个很绝望。
如此简单，但它确实.. 不.. 工作！

这里是：

---

一旦我滚动到某个点，我正在尝试向我的标题添加一个向下滑动的动画。 问题是过渡不起作用，它只是“跳跃”。

我忽略了什么？

我设置了这个 codepen 以尽可能简单地确定问题：https://codepen.io/MDVizzy/pen/yLeQRPM

HTML

<div class="wrapper">
  <header>THIS REPRESENTS MY HEADER</header>
  </div>

CSS

.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;
  animation: all 3s;
}
header.animation {
  top: 200px;
}

JS

$( document ).ready(function() {
  
  $(window).bind('scroll', function () {
            if ($(window).scrollTop() > 300) {
                
                    $("header").addClass('animation');
                
            } else {
                
                $("header").removeClass('animation');
        
            }
    
        });
  
});

Answer 1

您只需为此代码使用transition: ... CSS 规则

使用animation: ... 需要链接的@keyframes myAnimation { ... } - See Mozilla's examples here

$( document ).ready(function() {
  
  $(window).bind('scroll', function () {
            if ($(window).scrollTop() > 300) {
                
                    $("header").addClass('animation');
                
            } else {
                
                $("header").removeClass('animation');
        
            }
    
        });
  
});

.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 0.3s ease; /* swap with your `animation: ...` rule */
}
header.animation {
  top: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
    <header>THIS REPRESENTS MY HEADER</header>
</div>