0

我有一个页面，当元素的顶部碰到它时，该元素应该贴在视口的顶部。我正在使用一个名为 Skrollr 的插件来完成此操作。我遇到的问题是，当元素到达视口顶部并切换到fixed在其中定位内容时，它似乎闪烁或移动。这只发生在我快速滚动时。如果我滚动缓慢，它不会闪烁或移动。

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

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

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

4

1 回答 1

0

从外观上看，它将 div 重新缩放到 100% 宽度并重新渲染到视口大小。当 in 时position: static，一个元素在 DOM 流中并且将被其父元素绑定。但是，当在position: fixed其中时，父 => 子关系被破坏，并且元素被从 DOM 流中取出。这会强制浏览器在没有 DOM 流中的元素的情况下重新绘制 DOM。

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

于 2013-11-26T15:05:11.740 回答