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

我有一个页面，其中有一个元素，当元素顶部碰到它时，该元素应该会粘在视口顶部。我正在使用一个名为Skrollr的插件来实现这一点。我遇到的问题是，当元素击中视口顶部并切换到

fixed

时，其中的内容似乎会闪烁或移动。只有当我滚动得有点快时才会发生这种情况。如果我滚动慢，它不会闪烁或移动

下面是一个JSFIDLE，其中有一个我看到的问题示例。除了Chrome，我还没有测试过其他浏览器

---

更新的JSFIDLE。。观察绿色块如何向上滚动越过视口顶部，然后再向下跳。这仅在快速滚动时发生

从外观上看，它将div重新缩放为100%宽度，并重新渲染为视口大小。当处于

位置：static

时，元素位于DOM流中，并将被其父元素绑定。但是，当处于

位置：fixed

时，父=>子关系被破坏，元素从DOM流中取出。这将强制浏览器在DOM流中不包含元素的情况下重新绘制DOM

---

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

我刚刚更新了JSFIDLE，以显示在主体上没有空白时会发生什么。绿色元素向上滚动超过视口顶部，然后向下跳。我想阻止它那样做。这个插件的演示效果非常好，我看不出它和我正在做的有什么不同。看着你的小提琴，耸耸肩@DustinMcGrew，将元素从

位置：静态

更改为

位置：固定

仍然是个问题。您正在强制浏览器重新绘制DOM流，因此会出现闪烁。我建议以您给出的插件为例，他们似乎已经知道了如何做到这一点，而不需要重新绘制DOM本身。