javascript - 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 plugin

如果失败，您可以使用这样的代码来完成此操作，我正在使用动画，但您也可以轻松地使用一些淡入淡出，关键部分是我没有添加 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');
    }
};