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

Question

我有一个页面，当元素的顶部击中它时，该元素应该粘贴到视口的顶部。我正在使用一个名为Skrollr的插件来完成此任务。我遇到的问题是当元素点击视口的顶部并切换到fixed时，其中的内容会显示为闪烁或移位。这只发生在我滚动得有点快的时候。如果我滚动慢，它不会闪烁或移动。

这是一个jsfiddle与我看到的问题的一个例子。除了Chrome之外，我还没有测试过任何其他浏览器。

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

更新了jsfiddle ..观察绿色块如何向上滚过视口顶部，然后向下跳回。这只在快速滚动时发生.. http://jsfiddle.net/dmcgrew/sYV6L/1/

Answer 1

从它的外观来看，它将div重新缩放到100％宽度并重新渲染到视口大小。在position: static中时，元素在DOM流中并且将由其父元素绑定。但是，在position: fixed中，该父= =子关系被破坏，元素被从DOM流中取出。这会强制浏览器重新绘制DOM而不使用DOM流中的元素。

这就是为什么你得到那一分钟的闪光和重新缩放。如果这将成为一个问题，我建议使用某种过渡（jQuery动画等）来缓解它，或使用不强制窗口重新绘制的不同插件。