jQuery 动画({顶部 : x}) very laggy in everything but chrome

Question

我一直在尝试使用 jQuery 及其 animate() 函数编写一个非常简单的动画粘性侧边栏，以更改 div 的 top: CSS 属性。不幸的是，除了 chrome 之外，在所有其他平台上，它都会变得非常滞后。我假设每次窗口滚动时它都会填充内存并计算一个 newTop。有更好的方法吗？

$(function() { // document ready 
    var $sticky = $('.sticky');
    var stickyTop = $sticky.offset().top;
    var padding = 0;
    var stickyMargin = parseInt($sticky.css('margin-top')) + padding;
    var intersection = stickyTop - stickyMargin;

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

        if (intersection < windowTop) {
            var newTop = (windowTop - intersection);
            $sticky.stop().animate({top: newTop}, 'slow');
        }
        else if ($sticky.offset().top != 0) {
            $sticky.stop().animate({top: 0}, 'slow');
        }
    });
});

Answer 1

我看到的问题是每个滚动操作都会创建一个动画，该动画在浏览器的渲染管道中排队。您需要对动画进行去抖动处理，这样您就不会得到使整个事情变得极其错误的动画堆栈。例如，您可以等待几毫秒，滚动才会有效注册。看看jQuery Timeout 。之后，您可以通过编辑脚本中的scroll()函数来使用它

$(window).scroll(function(){
   $.doTimeout( 'scroll', 300, function(){
      // do your animation
   });
});