Question

我在页面顶部有一个带有菜单的标题元素。当我向下滚动时，标题会动画到较低的高度。当我向上滚动并到达顶部时，标题会动画显示原始大小。

但它并不完美。有时候事情发生前需要两秒钟。特别是当我向上滚动并到达顶部时。有没有办法改进此代码以获得更好的性能？

// Scroll show menu
$(window).scroll(function(){
    scrollPosition = $(this).scrollTop();

    if (scrollPosition >= 150) {
        $("header").animate({
            height: '65px'
        }); 
    }

    if (scrollPosition <= 100) {
        $("header").animate({
            height: '130px'
        });
    }
});

Answer 1

问题是因为scroll事件会为每个滚动的像素触发一次。因此，如果向下滚动500px，则需要向队列中添加350个动画。

要防止这种情况，您可以使用stop()清除队列中的所有现有动画。试试这个：

$(window).scroll(function(){
    scrollPosition = $(this).scrollTop();

    if (scrollPosition >= 150) {
        $("header").stop().animate({
            height: '65px'
        }); 
    }

    if (scrollPosition <= 100) {
        $("header").stop().animate({
            height: '130px'
        });
    }
});

Example fiddle

@Proxytype建议的更清洁的解决方案是使用CSS转换，addClass和removeClass使用jQuery：

header {
    height: 130px;
    transition: height 0.3s;
}
header.small {
    height: 65px;
}

$(window).scroll(function(){
    scrollPosition = $(this).scrollTop();
     $("header")[scrollPosition >= 150 ? 'addClass' : 'removeClass']('small');
});

上面的最后一行是这个逻辑的浓缩版本：

if (scrollPosition >= 150) {
    $('#header').addClass('small');
}
else {
    $('#header').removeClass('small');
}

Example fiddle

Answer 2

最好使用CSS3比JavaScript更有效，例如：

$('#dd').css("transition-duration", 0.2 + "s");
$('#dd').css("-webkit-transition-duration", 0.2 + "s");
$('#dd').css("transform", "translate3d(" + 30 + "px,0,0)");

http://jsfiddle.net/6c2mhuwd/

滚动事件反应缓慢

2 个答案: