jquery - 滚动时jQuery css动画摇晃

我有这个外部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上测试

最佳答案

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

参见此demo。



编辑：

除了将#divheader设置为scroll()之外，找不到其他技术可以更好地防止position:fixed上的晃动/抖动。因此，我提出了一个解决方案，使您可以向下滚动该固定元素：

首先，我们需要将#divheader表包装在<div>上，并基于scrollTop()的#outerDiv值设置其scrollTop()位置。

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

然后，我们需要将此包装器的height设置为等于#outerDiv的高度，这样它就不会溢出。由于滚动条的原因，获取#outerDiv的高度有些棘手。而我想出的最好的解决方案是将height元素设置为100%内的#outerDiv。

//create a new element with height 100% inside the '#outerDiv'
var p = $('<p style="height: 100%;"/>');
$('#outerDiv').append(p);
//get the elements height then remove it
var h = p.height();
$(p).remove();
//set the wrapper's height
$('#headerWrapper').height(h);

这是jsfiddle。