javascript - 为什么 window.onscroll 落后于实际滚动？

Question

我正在使用等效代码来定位元素：

$(window).scroll(function(){
    my_element.css("top",$(window).scrollTop() + 50)
});

问题是：在滚动期间元素不会保持静止。它来回摆动，好像onscroll事件的调用速度不如滚动快。奇怪的是，有时它只是有效。

Answer 1

我建议您position: fixed在 CSS 中使用，而不是调整每个滚动条的顶部。这样，无论您滚动多快，您的标题都将稳定在一个位置。

IE

<div style="font-family: oswald; color: white; position: fixed; top: 50px; ...">...</div>

并完全取消滚动事件处理程序。

甚至更好地使用一个类，<div class="heading">...</div>

在你的 CSS 中：

.heading {
    font-family: oswald;
    ...
    position: fixed;
    top: 50px;
}

Answer 2

这是因为当您拖动并移动滚动条按钮进行滚动时，滚动事件会被多次调用，具体取决于您执行此操作的快慢，并且在此期间，每次都会调用您在滚动事件中指定的函数，计算并执行（可能需要几分之一秒才能完成）。

作为一种解决方法，您可以使用 CSS position: fixed 属性。如果您必须按照自己的方式进行操作，那么可能的解决方法是稍微延迟一下？