javascript - 如何消除滚动时的弹跳？

Question

这page使用一些 JS 来防止左侧面板的顶部滚动超过视口(viewport)的顶部边界。¹

在 Chrome 31 和 Firefox 25 下，左侧面板在滚动到包含 div 的顶部时保持坚如磐石，但在其他浏览器(例如 IE 11 和 Safari 6)中，左侧面板“弹跳”垂直滚动。 (一旦滚动停止，左侧面板的位置就稳定了。)

这是负责此效果的 JS/jQuery 代码:

  (function () {
     var w = $(window),
         lc = $('.left-panel');

     w.scroll(function () {
       var st = w.scrollTop(),
           ot = lc.offset().top;
       $('.vfloat').css('top', Math.max(0, st - ot));
     });

  }());

问题:如何消除左侧 div 不需要的“弹跳”？

编辑:清理并简化了代码片段。

_{¹要实现此效果，您可能需要调整窗口的垂直尺寸，以便右侧面板有足够的空间落在视口(viewport)之外。}

Answer 1

这是每个浏览器触发滚动事件的方式。您使用非常昂贵的 height 计算并导致网页回流，这取决于浏览器如何处理。

我可以建议您 2 个选项来解决您的问题:

1) 只需使用 jQuery animate 来更改左侧 div 的位置，这样位置就会平滑地更改，您甚至可以使用非常快的速度。如果您不想使用 jQuery，您可以通过编写自己的代码并使用计时器平滑地更改顶部位置甚至 css3 动画来模拟相同的行为。

2) 第二种方法(我认为这是首选方法)在这种情况下不使用 javascript 进行位置操作，而仅使用 javascript 将 position: fixed 类分配给您的左侧容器在某些条件下。它仍然会导致回流，但不会有滚动事件导致的延迟。

解决方案 1 - 使用 css3 过渡和 jQuery 实现流畅的动画:http://jsfiddle.net/6bYhx/4/ (同样可以用 jQuery.animate() 完成)

解决方案 2 - 使用 position: fixed 和 addClass(IE 的问题仍然存在，因为滚动事件被延迟):http://jsfiddle.net/S5Sgu/

所以我认为最佳解决方案是经过一些修改的平滑动画(技术 1)。