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

MDVizzy

因为我对这个很绝望，所以在这里先发表。
如此简单，但是它确实..行不通！

它去了：

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

我在俯视什么？

我设置了此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;
}

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

马修·斯彭斯（Matthew Spence）

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

使用animation: ...需要链接@keyframes myAnimation { ... }-请在此处查看Mozilla的示例

$( 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。