2

我一直在尝试使用 jQuery 及其 animate() 函数编写一个非常简单的动画粘性侧栏来更改顶部：div 的 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');
        }
    });
});
4

1 回答 1

1

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

$(window).scroll(function(){
   $.doTimeout( 'scroll', 300, function(){
      // do your animation
   });
});
于 2012-11-18T17:11:56.083 回答