javascript - 向下滚动时导航栏中的过渡

Question

当我向下滚动时，我的导航栏颜色会发生变化。颜色在变化。但是没有过渡效果。如何为此进行过渡。这是我的代码..

$(window).scroll(function() {
if($(this).scrollTop() > 0)
{
    $('.navbar-trans').addClass('afterscroll');
} else
{
    $('.navbar-trans').removeClass('afterscroll');
}  

});

这是我的脚本代码。我的 CSS 是，

.navbar.navbar-trans.afterscroll { background-color:#1ba4df; }

如何为此添加动画。

Answer 1

只需将此规则添加到您的 css 文件中即可。它会为你工作，因为这里 transition 属性设置为所有更改...

.navbar-trans {transition: all 0.3s ease; /* other css rules here */}

阅读更多关于过渡属性的信息 here...