Question

随着用户滚动，我试图在每个部分中实现固定内容的简单视差类型效果。

所有内容都会按预期滚动，但是在除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>

Answer 1

在jQuery中更改此行：

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

收件人：

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

为边距最高的jquery设置动画时的Jumpy Safari和Firefox

1 个答案: