Question

我试图用jquery动画我的菜单 - 只需根据滚动更改填充。它工作正常，但执行时间非常长（1-10秒）。有任何想法吗？我试过.on（＆＃39;滚动＆＃39;）但没有改变。

Chrome和Firefox都有。

有趣的事情 - 如果我添加警报（v）;在第3行之后确定滚动位置，它动画效果很好，没有任何延迟; x

    <script>
        $(window).scroll(function() {
            var v = $(window).scrollTop();
            if (v >= 150) {
                $('#header').animate({"padding": "15px 0px"},500);
            }
            else if (v < 150 ) {
                $('#header').animate({"padding": "50px 0x"},500);
            }
        });
    </script>

您可以在此处查看问题： http://monsiorski.com/_projects/robson/

Answer 1

<script>
    var isScrolled = false;
    $(window).scroll(function() {
        var v = $(window).scrollTop();
        if (v >= 150 && !isScrolled) {
            $('#header').animate({"padding": "15px 0px"},500);
            isScrolled = true;
        }
        else if (v < 150 && isScrolled) {
            $('#header').animate({"padding": "50px 0x"},500);
            isScrolled = false;
        }
    });
</script>

Answer 2

这是因为两个原因：A）滚动事件被触发每个滚动的像素，而B）你每次都计算很多。

A）很容易修复，你可以限制它dethrottling or debouncing发射的事件数量。你可以将它设置为每20ms发射一次仍然非常快，但会节省大量的电话。

B）限制你的计算。触发函数的次数越多，就必须重新检查一个函数是否可以使它更轻盈。

在您的情况下，您可以计算从顶部滚动多少，设置每次调用的值。相反，您也希望存储已经超过阈值的商店。如果您已经通过了它并且滚动值＆gt;阈值，则无需再次将其设置为相同的值。向后滚动也是如此。 检查布尔值非常快。

滚动（）获得大滞后

2 个答案: