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

Question

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

 $(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});
        }
    });

也许你能帮我。我使用谷歌浏览器和 Bootstrap 3。

Answer 1

您遇到的问题是每次滚动条移动时都会触发“滚动”。所以每次滚动条移动一个像素时，它都会进行 IF 检查。这就是为什么你延迟你的动画这么久。如果您将滚动条移动太多，要运行的队列就会堆积起来。