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

Change Height of Navbar on Scroll Jquery with Bootstrap3

本文关键字：导航 高度 Jquery Bootstrap3 更改 Scroll 使用      更新时间：2023-09-26

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

也许你能帮我。我用谷歌浏览器和引导3。

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

演示

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

我在.navbar的高度上添加了一个css转换。让这一切几乎立即发生。事件不还在吗True，但更改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',
        });
    }
});
相关文章：