向下滚动时在Navbar中过渡

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 */}

在此处阅读有关过渡属性的更多信息...

Answer 2

就这样...试试这个家伙。

 .navbar.navbar-trans.afterscroll { background-color:#1ba4df; Transition:0.3s all linear; }