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

【问题标题】：Change Height of Navbar on Scroll Jquery with Bootstrap3使用 Bootstrap3 在滚动 Jquery 上更改导航栏的高度
【发布时间】：2015-03-17 09:47:13
【问题描述】：

您好，我的导航栏有问题。我想在滚动上对其进行动画处理并更改他的高度。当我向下滚动一点时，它的动画应该更小，当我在页面顶部时，它应该动画更大。标准高度为 100 像素。问题是当我在页面顶部时需要延迟，我需要等待，直到它动画。如果我先滚动到页面底部然后再回到顶部，它们的延迟会变长。高度为 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});
        }
    });

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

【问题讨论】：

我似乎无法重现这个？ jsfiddle.net/8woj7q7t
只有一页。高度为 11000~ 像素。当我只停留在前 2000~ px 时，它运行良好。但正如我提到的，当我滚动到页面底部然后回到顶部时，我需要等待 5 秒，直到动画开始播放。感谢您的回答。
经过 11000 像素测试.. 尺寸不错...确实需要等待很长时间。我可以建议您使用此信息编辑您的问题吗？因为它对手头的问题至关重要
当您在 $(window) 而不是 $(document) 上执行此操作时，等待的时间似乎少了很多
现在可以了。您需要使用计时器。

标签： javascript jquery css twitter-bootstrap navbar

【解决方案1】：

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

【讨论】：

【解决方案2】：

DEMO

滚动事件似乎会在您滚动时触发很多，因此所有事件都会排队。所以真正改变你标题的事件似乎需要很长时间才能出现。

我在 .navbar 的高度上添加了一个 css 过渡。让这几乎立即发生。事件不还在吗？是的，但更改 css 的要求要比添加动画（持续时间为 100 毫秒）要少得多。过渡确实有一个持续时间，但它不必完成，因此其他事件可以随时进入。

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

【讨论】：