Question

我一直在尝试使用jQuery及其animate（）函数编写一个非常简单的动画粘性边栏来更改div的top：CSS属性。不幸的是，除了铬之外，它可能会变得非常迟钝。我假设每次窗口滚动时都会填充内存并计算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
   });
});

jQuery动画（{top：x}）在除了chrome之外的所有东西中都非常迟钝

1 个答案: