实现简单的视差：图像＆＃34;跳跃＆＃34;在Firefox和Safari中

Question

我有以下用例：

1. 两个内容元素与中间的图像
2. 图片应始终显示为整体（与contain - background-size - 属性的值相关）
3. 此行为在所有视口中应相同，从而导致图像缩放（但始终完全可见）
4. 滚动时，每个图像都应该正常滚动到顶部
5. 一旦图像到达顶部，视差效应应该启动

您可以在此处查看我的实施： http://codepen.io/AvantiC/pen/BpReza

它在Chrome中效果很好，滚动和视差看起来非常流畅。但是当我在Firefox或Safari中测试页面时，图像表现为＆＃34;跳跃＆＃34; /＆＃34;生涩＆＃34; （不确定这里是否有正确的词;））。

我不确定它是否是Firefox / Safari的一个问题，或者我的实现是否有问题，而且Chrome在某种程度上是在内部弥补它。

也许有人可以指出我正确的方向。 ：）

问候， AvantiC

Answer 1

不是每帧都设置图像位置，而是尝试更改CSS，以便在用户滚动到某个点后图像保持静止。