的DIV閃爍當一個DIV

Question

內滾動時將它們定位固定我有4倍的DIV我象下面

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); 

這裏是小提琴http://jsfiddle.net/8NL2S/5/，當我在Safari測試它上滾動4種元素的改變位置，它閃爍。沒有什麼花哨的。 Safari在很多情況下都以同樣的方式激起了我的希望。我怎樣才能解決這個問題。

Answer 1

，如果你的DIV的大小是固定的，你在所有的瀏覽器則沒有必要再調用JS功能，只需設置CSS的float想在同一位置：左;財產與你所有的divs和使用CF類的外部div的那4個div。實例是：

HTML: 

<div class="parent"> 
    <div class="static cf"> 
     <div class="left"></div> 
     <div class="right"></div> 
     <div class="header"></div> 
     <div class="footer"></div> 
    </div> 
</div> 

CSS: 


.header{ 
    border:1px solid red; 
    width:100px; 
    height:100px; 
    background-color:#F2F2F2; 
    float:left; 
    top:0px; 
    left:0px; 
    z-index:10; 
} 
.left{ 
    border:1px solid red; 
    height:100px; 
    width:100px; 
    left:0px; 
    float:left; 
    top:100px; 
    background-color:#CCC; 
} 
.right{ 
    border:1px solid red; 
    height:100px; 
    width:100px; 
    right:0px; 
    float:left; 
    top:100px; 
    background-color:#CCC; 
} 
.footer{ 
    border:1px solid red; 
    width:100px; 
    height:100px; 
    background-color:#F2F2F2; 
    float:left; 
    left:0px; 
    bottom:0px; 
    z-index:10; 
} 
.static{ 
    height:105px; 
    width:410px; 
    position:relative; 
} 
.cf{clear:both} 

Answer 2

由於滾動功能，當您滾動時由於div的重新渲染/重新定位，您的幀會閃爍。爲了防止這種情況，您最好使用不同的方法創建顯示。

由於您似乎使用純CSS與css和jquery文件附加，有許多其他方式來解決您的問題。

第一種方法是簡單地刪除你的滾動功能，它看起來不像你需要它們。 position:fixed會解決它，所以你滾動時你的div跟着你。

另一種方式是使用任何類型的框架。這可以是基於CSSGrid的，正如Kerry Liu在評論中展示的一個例子，或者如果您絕望，它可以基於html（如<frame>）。

如果你對樣式有更高的要求，然後定位，那麼可能有一個Jquery插件可以幫助你進一步。

Answer 3

您可能正在尋找類似的東西？
http://jsfiddle.net/sijav/8NL2S/12/
必須把每position:fixed ...野應需要使用jQuery

Answer 4

我可能會想太簡單了這裏，但沒有位置：固定解決問題了嗎？

恐怕沒有好的解決方案，包括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

Answer 5

使用position:fixed方式上文建議將您的定位相對於窗口內的div，而不是父DIV。如果你想保持內部.parent一切，使用下面的CSS（不需要JS）：

.parent { 
    position:relative; 
    height:400px; 
    width:800px; 
    margin:0 auto; 
    overflow:auto; 
    border:1px solid #CCC; 
} 
.header, .footer { 
    position:fixed; 
    width: 800px; /* .parent width */ 
    height:100px; 
    z-index:10; 
    background-color:#F2F2F2; 
} 

.footer { 
    margin-top: 300px; /* .parent hight - .footer hight */ 
} 

.left, .right { 
    position:fixed; 
    width: 100px; 
    height: 400px; /* .parent height */ 
    background-color:#CCC; 
} 

.right { 
    margin-left: 700px; /* .parent width - .right width */ 
} 

.static { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 1000px; 
    height: 1000px; 
} 

這應該給你想實現無閃爍的佈局和行爲。你可以嘗試下面。

http://jsfiddle.net/myajouri/VYmHv/1/

希望幫助！