我正在尝试在用户滚动时在每个部分中使用固定内容完成一个简单的视差类型效果。
所有内容都按预期滚动，但是在每个浏览器中，除了Chrome以外，固定元素"移动"通过调节保证金顶部是抖动而跳跃的，并且不是流体。
在抖动方面的任何帮助，或者可能以稍微不同的方式来做到这一点。先感谢您。
这是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>
在您的jQuery中更改此行：
jQuery(this).css({
'margin-top': marginTop
});
to：
jQuery(this).css({
'transform': translateY(marginTop)
});