Question

我在滚动时使用JQuery，其显然会在用户滚动时运行多次但是如果用户足够快地上下滚动动画则会滞后。我假设这是因为每次滚动完成时都会执行该方法。我已经尽力优化下面的代码，如果您有任何想法需要改进，请告诉我们！

$( document ).ready(function() {
    var count = 0;
    var speed = 100;
    var triggerY = 50;
    $(window).on('scroll', function() {
        count++;
        if (count>10) {
            var currentY = window.pageYOffset;
            if (currentY < triggerY) {
                if ($('#accountHolder').height() != 70) {
                    $('#barTitle').animate({fontSize: "40px"}, speed);
                    $('#barSlogan').fadeIn();
                    $('#accountHolder').animate({height: "70px"}, speed);
                    $('#accountPosition').animate({top: "13px"}, speed);
                }
             } else {
                if ($('#accountHolder').height() != 60) {
                    $('#barTitle').animate({fontSize: "32px"}, speed);
                    $('#barSlogan').fadeOut();
                    $('#accountHolder').animate({height: "50px"}, speed);
                    $('#accountPosition').animate({top: "5px"}, speed);
                }
            }
            count = 0;
        }
    });
});

Answer 1

scroll事件是一项非常昂贵的操作，因为每次用户在绑定元素上滚动时都会触发该事件。

如果您正在寻找性能，请使用CSS动画而不是JS动画。 CSS动画更快且无滞后。

这就是我的意思。

$( document ).ready(function() {
    var count = 0;
    var speed = 100;
    var triggerY = 50;
    $(window).on('scroll', function() {
        count++;
        if (count>10) {
            var currentY = window.pageYOffset;
            if (currentY < triggerY) {
                if ($('#accountHolder').height() != 70) {
                    $('#barTitle').addClass('increase-font-size')
                    $('#barSlogan').addClass('show');
                    $('#accountHolder').addClass('increase-height');
                    $('#accountPosition').addClass('pull-down');
                }
             } else {
                if ($('#accountHolder').height() != 60) {
                    $('#barTitle').removeClass('increase-font-size')
                    $('#barSlogan').removeClass('show');
                    $('#accountHolder').removeClass('increase-height');
                    $('#accountPosition').removeClass('pull-down');
                }
            }
            count = 0;
        }
    });
});

这些类应该具有动画样式。

.increase-font-size {
    font-size: 40px;
    -webkit-transition: font 2s;
    transition: font 2s;
}
.show {
    opacity: 1;
    -webkit-transition: opacity 2s;
    transition: opacity 2s;
}
.increase-height {
    height: 70px;
    -webkit-transition: height 2s;
    transition: height 2s;
}
.pull-down {
    top: 13px;
    -webkit-transition: top 2s;
    transition: top 2s;
}

在滚动时优化JQuery并停止方法排队

1 个答案: