使用Bootstrap3更改Scroll Jquery上Navbar的高度

时间:2015-03-17 09:47:13

标签: javascript jquery css twitter-bootstrap navbar

您好我的导航栏有问题。 我想在滚动动画并改变他的高度。当我向下滚动一点时,它应该是较小的动画,当我在页面的顶部它应该aniamte更大。标准高度为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});
        }
    });

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

2 个答案:

答案 0 :(得分:2)

您遇到的问题是每次滚动条移动时都会触发“滚动”。因此,每当滚动条移动一个像素时,它都会进行IF检查。这就是为什么你把动画延迟这么久了。如果你移动滚动条太多,那么要运行的事物的队列会非常堆叠。

答案 1 :(得分:1)

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