jquery - 在 Div 内滚动时，DIV 固定时会闪烁

Question

我有 4 个 DIV，我正在改变 4 个元素在滚动条上的位置，如下所示

 function adjustPositions(e) {
    var div = e ? $(this) : $('.parent');
    div.find('.left').css({
      left: div.scrollLeft() + "px"
    });
    var right = div.find('.right');
    right.css({
       left: div.scrollLeft() + div.width() - right.width() + "px"
    });
    div.find('.header').css({
       top: div.scrollTop() + "px"
    });
    var bottom = div.find('.footer');
    bottom.css({
      top: div.scrollTop() + div.height() - bottom.height() + "px"
    });
 }
 adjustPositions();
 $('.parent').on('scroll', adjustPositions);

这是 fiddle http://jsfiddle.net/8NL2S/5/ ，当我在 Safari 中测试它时，它会闪烁。这没什么特别的。 Safari 多次在同一个案例中像这样踢了我的希望。我该如何解决这个问题。

Answer 1

我可能在这里想的太简单了，但是 position: fixed 不是解决了你的问题吗？

我恐怕没有很好的解决方案，包括 javascript。 Safari 处理 javascript 的速度还不够好，无法获得流畅的动画。

您将在下面找到解决问题的下一个最佳解决方案，仅使用 css。

我将您的 CSS 编辑为以下内容:

.header{
    width:1000px;
    height:100px;
    background-color:#F2F2F2;
    position:fixed;
    top:0px;
    left:0px;
    z-index:10;
}
.left{
    height:1000px;
    width:100px;
    left:0px;
    position:fixed;
    top:100px;
    background-color:#CCC;
}
.right{
    height:1000px;
    width:100px;
    right:0px;
    position:fixed;
    top:100px;
    background-color:#CCC;
}
.footer{
    width:1000px;
    height:100px;
    background-color:#F2F2F2;
    position:fixed;
    left:0px;
    bottom:0px;
    z-index:10;
}
.static{
    height:1000px;
    width:1000px;
    position:relative;
}

我删除了所有 javascript。除此之外，没有任何改变。

参见 fiddle