为 margin-top jquery 设置动画时跳跃的 Safari 和 Firefox

Question

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

一切都按预期滚动，但在除 Chrome 之外的所有浏览器中，通过调整 margin-top 的固定元素“移动”是紧张和跳跃的，而且不流畅。

对抖动的任何帮助或稍微不同的方法都会有很大帮助。先感谢您。

这是 CodePen 上的简化代码 https://codepen.io/mobiusint/pen/OdGavY

<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>

Answer 1

在你的 jQuery 中改变这一行：

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

收件人：

jQuery(this).css({ 'transform': translateY(marginTop) });