从静态位置切换到固定位置时闪烁

我有一个元素的页面，当元素的顶部碰到它时，它应该粘贴到视口的顶部。我正在使用名为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

从静态位置切换到固定位置时闪烁

回答

相关问题