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');
}
};

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

Answer 1

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

如果失败了，你可以使用你的代码这样做，我使用动画，但你可以轻松地使用一些淡入淡出，关键部分是我没有添加fixed-top，直到动画完成。 animate()，fadeIn()和fadeOut()都有回调函数。如果需要，您可以使用回调链接动画。

另外值得注意的是，我在顶部声明了变量header = $('header.banner');，这会加快速度，因为每次使用jQuery时都不会让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');
    }
};

bootstrap 3 navbar static top在动画滚动时更改为固定顶部

1 个答案: