站点顶部的动画导航背景

Question

我有一个首页导航，我希望它在屏幕顶部时具有透明背景，然后在用户向下滚动时具有白色背景。

我有的代码是有效的，但是我希望它能够动画，因为类被删除而动画没有时间在删除类之前没有时间，所以它不能像我一样工作。

寻找更好的方法来实现我的目标

码

$(window).on('scroll', function () {
 if ($(window).scrollTop() > 10) {
  $('#anim-nav').addClass('bg-fill');
 } else {
  $('#anim-nav').removeClass('bg-fill');
 }
});

CSS

.bg-fill { 
  background-color: #fff; 
  -webkit-transition: background-color 0.35s ease;
  -moz-transition: background-color 0.35s ease;
  -ms-transition: background-color 0.35s ease;
  -o-transition: background-color 0.35s ease;
  transition: background-color 0.35s ease;
}

HTML

<nav id="anim-nav" class="row bg-fill">  ...

Answer 1

将转换规则添加到nav元素，您将获得fadeIn和fadeOut效果。

#anim-nav {
    height: 60px;
    position: sticky;
    top: 0;
    border: 1px solid #ddd;
    -webkit-transition: background-color 0.35s ease;
    -moz-transition: background-color 0.35s ease;
    -ms-transition: background-color 0.35s ease;
    -o-transition: background-color 0.35s ease;
    transition: background-color 0.35s ease;
}

.bg-fill { 
    background-color: #aaa; 
}

将它放在切换类上只会在添加类时为其设置动画，将其添加到元素本身将在添加和删除类时为其设置动画。

编辑：

Working pen

Answer 2

function myAnim() {
var e = document.getElementById("anim-nav");
var pos = 0;
var id = setInterval(frame, 10);
function frame() {
    if (pos == 350) {
        clearInterval(id);
    } else {
        pos++;
        e.style.top = pos + 'px';
        e.style.left = pos + 'px';
    }
  }
 }