使用Bootstrap3更改滚动Jquery上导航栏的高度

Question

您好，我的导航栏有问题。 我想在滚动上为其设置动画并更改他的身高。 当我向下滚动时，它应该设置较小的动画，而当我在页面顶部时，应该设置较大的动画。 标准高度为100像素。 问题是当im在页面顶部时，我需要等待一段时间，直到它动画为止。 如果我先滚动到页面底部，然后再滚动到顶部，则延迟会变得更长。 的高度为11000px。 这是我的代码：

 $(document).on("scroll",function(){
        if($(document).scrollTop()>500)
        {
            $( ".navbar" ).animate({height: 50} ,{duration:100});
        }
        else if($(document).scrollTop()==0)
        {
            alert("dhsihsp");
            $( ".navbar" ).animate({height: 100} ,{duration:100});
        }
    });

也许你可以帮助我。 我使用Google Chrome和Bootstrap 3。

Answer 1

您遇到的问题是滚动条每次移动都会触发“滚动条”。 因此，滚动条每移动一个像素一次，它将进行IF检查。 这就是为什么您将动画延迟这么长时间的原因。 如果您将滚动条移动得太多，那么将要运行的事物队列就会大量堆积。

Answer 2

DEMO

当您滚动时，scroll事件似乎触发很多，因此所有事件都排队。 因此，实际上更改标题的事件似乎需要很长时间才能出现。

我在.navbar的高度上添加了CSS过渡。 使这几乎立即发生。 事件还不在那里吗？ 的确如此 ，但是更改css的要求比添加动画（持续时间为100ms）要少得多。 过渡确实有一定的持续时间，但不一定要结束，因此可以随时引入其他事件。

CSS

.navbar {
    transition: height 0.1s;
}

jQuery的

$(window).scroll(function () {
    var scrollh = $(this).scrollTop();
    if (scrollh == 0) {
        $(".navbar").css({
            'height':'100px',
        });
    } else {
        $(".navbar").css({
            'height':'50px',
        });
    }
});