window.scroll不是即时动画

时间:2014-01-15 13:41:57

标签: javascript jquery scroll

我试图检测用户在页面上向下滚动的时间,因此我可以为div的高度设置动画。当用户位于页面顶部时,#header为100px,一旦滚动,它就变为50px。这是我的代码:

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 10) {
       $('#header').animate({height: "50px"});
    } else {
       $('#header').animate({height: "100px"});
    }
});

以上情况有效,但当用户滚动回到顶部时,在高度动画发生之前会有一点延迟。

有什么想法吗?

2 个答案:

答案 0 :(得分:1)

我认为默认持续时间是400毫秒,这可能导致视觉延迟。您是否尝试过不设置高度动画并仅通过.css('height', '50px')进行设置?

至少会告诉你它的animate()调用是否导致延迟或window.scroll事件处理程序......

答案 1 :(得分:1)

多次调用

窗口onscroll,因此您将多次触发动画。这导致多个动画同时运行。您需要在触发下一个动画之前使用stop()取消上一个动画。

$(window).scroll(function() {    
    var scrollTop = $(this).scrollTop();
    var height = (scrollTop >= 10) ? "50px" : "100px";
    $('#header').stop().animate({height: height});
});

现在,您可以做的另一件事是跟踪最后一个高度,如果.is(':animated')正在运行,则不要再打扰它了。它仍然需要.stop()