JQuery 如何在向上或向下滚动时调整 div 大小

Question

当屏幕位于页面顶部或其他任何位置时，我在调整 div 大小时遇到​​问题。

$(window).scroll(function() {
    top = $('html').scrollTop();
    setTimeout(
    function() 
    {
        if(top == 0)
        {
            $(".navbar").animate({height:'70px'});
        }
        else
        {
            $(".navbar").animate({height:'43px'});
        }
    }, 100);

});

当我向下滚动时，

Div .navbar 正在调整大小，但当屏幕位于顶部时它没有达到原始高度。如何调整回来？另外，如果您有任何想法如何以不同的方式制作它 - 发布它。

谢谢。

Answer 1

正在触发多个滚动事件，导致这些动画排队，这可能会导致导航栏更改高度之前出现较长的延迟。尝试在每次触发时清除计时器。

var scrollTimer = null;
$(window).scroll(function() {
    var top = $(document).scrollTop(); // use document (suggested by seva.rubbo)
                                       // use local var (suggested by Sam Battat)

    clearTimeout(scrollTimer);
    scrollTimer = setTimeout(
    function() 
    {
        if(top == 0)
        {
            $(".navbar").animate({height:'70px'});
        }
        else
        {
            $(".navbar").animate({height:'43px'});
        }
    }, 100);
});

fiddle :http://jsfiddle.net/jzsxjw7o/1/