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

Question

Hello i have a problem with my navbar. I want to animate it on scroll and change his height. When i scroll a bit down it should animate smaller and when im at the top of the page it should aniamte bigger. The standard height is 100px. The problem is when im at the top of the page it takes a delay, which i need to wait, until it animates. They delays gets longer if i scroll first to the bottom of the page and then back to the top. The has a height of 11000px. This is my code for it:

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

Maybe u can help me. I use Google Chrome and Bootstrap 3.

Answer 1

The problem you are having is that the "scroll" fires every single time the scrollbar moves. So every single time the scrollbar moves a pixel, it will do the IF checks. That's why you delay your animation for so long. The queue of things to run stacks up immensely if you move the scrollbar too much.

Answer 2

DEMO

The scroll event seems to fire a lot when you scroll so all the events get queued. So the event that actually changes you header seems to take a long time to appear.

I added a css transition on the height of a .navbar . for making this happen almost instantly. Are the events not still there? True , but changing css is a lot less demanding then adding animations (with a duration of 100ms). The transition does have a duration but it does not have to finish so an other event can come in at any time.

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