滚动时jQuery css动画抖动

Question

我有这个外部div，包含一个表。 我想要的是当我水平滚动外部div时，表格的标题保持固定。我通过创建一个只包含标题的新表来做到这一点，这个divheader是绝对位置：0;

当外部div滚动时，divheader的左侧位置等于外部div scrollLeft。

$('#outerDiv').scroll(function () {
    var left = $('#outerDiv').scrollLeft();
    $('#divheader').css('left', left);                
});

这项功能在firefox上运行得很好，但在chrome上，divheader有时会在快速滚动时发抖。在IE（10）上，它一直震动。

我的问题是如何避免IE和Chrome上的震动。

请考虑这个小提琴手：http://jsfiddle.net/Y7xZm/11/。在IE上测试

Answer 1

为什么不将left位置设置为scroll()，而不是在#divheader设置fixed属性。

请参阅此demo。

---

编辑：

找不到任何可以防止#divheader scroll()上出现摇晃/不稳定position:fixed的技巧，而不仅仅是设置#divheader。所以我提出了一个解决方案来启用向下滚动固定元素：

首先，我们需要在<div>上包含scrollTop()表，然后我们会在#outerDiv的{​​{1}}值上设置scrollTop()位置。

$('#outerDiv').scroll(function() {
    var top = $('#outerDiv').scrollTop();
    $('#headerWrapper').scrollTop(top);    
});

然后我们需要将此包装器的height设置为等于#outerDiv的高度，以便它不会溢出。由于滚动条，获得#outerDiv的高度有点棘手。我提出的最佳解决方案是在height内获取100%的{​​{1}}元素。

#outerDiv

这是jsfiddle。