设置margin-top jquery的动画时，Jumpy Safari和Firefox

Question

我正在尝试在用户滚动时在每个部分中实现具有固定内容的简单视差类型效果。

一切都按预期滚动，但在除Chrome之外的每个浏览器中，通过调整margin-top的固定元素“运动”是抖动和跳跃并且不流畅。

任何有关抖动的帮助或者可能采用稍微不同的方式来做到这一点都会有很大帮助。先感谢您。

以下是CodePen qazxsw poi的简化代码

https://codepen.io/mobiusint/pen/OdGavY

Answer 1

在jQuery中更改此行：

<div class="empty"></div>
<div class="home-parallax" id="home-slide-1">
<div class="home-parallax-bg-1"></div>
<div class="home-parallax-content">
<img src="https://placekitten.com/200/200" class="border">
</div>
</div>
</div>
<div class="empty red"></div>
<div class="home-parallax" id="home-slide-2">
<div class="home-parallax-bg-2"></div>
<div class="home-parallax-content">
<div><h1>Alot of content JUMPS in firefox & safari</h1></div>
<img src="https://placekitten.com/200/200" class="border">
<p>TEXT TEXT TEXT</p>
<img src="https://placekitten.com/200/200" class="border">
</div>
</div>
</div>

<div class="home-parallax" id="home-slide-3">
<div class="home-parallax-bg-3"></div>
<div class="home-parallax-content">
<img src="https://placekitten.com/100/100" class="border">
</div>
</div>
</div>

至：

jQuery(this).css({
        'margin-top': marginTop
      });