從靜態位置切換到固定位置時閃爍

我有一個元素的頁面，當元素的頂部碰到它時，它應該粘貼到視口的頂部。我正在使用名爲Skrollr的插件來完成此操作。我遇到的問題是，當元素點擊視口頂部並切換到fixed時，將內容放置在視口內似乎會閃爍或移位。這隻有在我快速滾動時纔會發生。如果我滾動慢，它不會閃爍或移位。從靜態位置切換到固定位置時閃爍

這是一個jsfiddle，我看到了一個問題的例子。除了Chrome之外，我還沒有測試任何其他瀏覽器。

http://jsfiddle.net/dmcgrew/sYV6L/

更新的jsfiddle ..手錶怎麼樣，綠色塊向上滾動過去的視口頂部稍然後跳轉背下來。這隻發生在快速滾動時。http://jsfiddle.net/dmcgrew/sYV6L/1/

來源

2013-11-26 Dustin

從外觀上看，它將div重新縮放到100％寬度並重新渲染到視口大小。在position: static中，當一個元素位於DOM流內時，將被其父元素綁定。但是，在position: fixed中，該父項=>子關係中斷，並且該元素從DOM流中取出。這會強制瀏覽器重新繪製DOM，而不使用DOM流中的元素。

這就是爲什麼你得到那一分鐘的閃光和重新調整。如果這將是一個問題，我會建議使用某種過渡（jQuery動畫等）來緩解它，或者使用不會強制窗口重新繪製的不同插件。

來源

2013-11-26 15:05:11 nickdoesdesign

我剛剛更新了jsfiddle，以顯示身體上沒有任何邊距時發生的情況。綠色元素向上滾動到視口的頂部，然後跳回。我想阻止它做到這一點。 http://jsfiddle.net/dmcgrew/sYV6L/1/ – Dustin

這個插件的演示運行完美，我沒有看到它的做法與我正在做的不同。 *聳肩* http://leafo.net/sticky-kit/ – Dustin

@DustinMcGrew看着你的小提琴，它仍然是一個問題，將元素從'position：static'改爲'position：fixed'。您迫使瀏覽器重新繪製DOM流程，因此您爲什麼會眨眼。我建議使用你給出的插件作爲例子，他們似乎已經想出瞭如何去做，而不需要重新繪製DOM本身。 – nickdoesdesign

從靜態位置切換到固定位置時閃爍

回答

相關問題