带有动画滚动时，bootstrap 3导航栏的静态顶部更改为固定顶部

Question

我有一个脚本，可在滚动时使bootstrap 3导航栏的静态顶部更改为固定顶部

document.onscroll = function() {
if( $(window).scrollTop() > $('header.banner').height() ) {
    $('header.banner').removeClass('navbar-static-top').addClass('navbar-fixed-top');
}
else {
    $('header.banner').removeClass('navbar-fixed-top').addClass('navbar-static-top');
}
};

但是当更改为固定顶部时如何添加动画？ 谢谢

Answer 1

如果您使用的是Bootstrap，我会查看affix插件

失败的话，您可以使用这样的代码来做到这一点，我正在使用动画，但是您也可以轻松地使用一些衰落，关键是在动画完成之前，我不会添加fixed-top 。 animate() ， fadeIn()和fadeOut()都有回调函数。 如果需要，可以使用回调将动画链接在一起。

另外值得注意的是，我声明了变量header = $('header.banner'); 在顶部，这将使速度加快一些，因为您不需要每次使用jQuery都可以找到它。 在一个大型的js文件中，使用这样的变量确实可以加快脚本的速度。

最后以动画速度播放以获得所需的效果。

document.onscroll = function() {
    var header = $('header.banner')
    if( $(window).scrollTop() > header.height() ) {
         header.animate({
             // place your own css styles here
             opacity: 0.5,
         }, 5000, function() {
             header.removeClass('navbar-static-top').addClass('navbar-fixed-top');
         }
    }
    else {
         header.removeClass('navbar-fixed-top').addClass('navbar-static-top');
    }
};