jquery - 带有边距顶部的双滚动滞后

Question

我为一个网站制作的 jquery 函数有问题，该网站有 2 个不同高度的列，并且应该以不同的速度一起滚动。

在这里你可以找到 fiddle : http://jsfiddle.net/w4g3rvhh/

var maxscroll = $(document).height() - $(window).height();
var projHeight = $("#projects").outerHeight( true );
var agencHeight = $("#agency").outerHeight( true );
var diffheight = projHeight - agencHeight;
$(window).scroll(function () {
  var margin = window.pageYOffset * diffheight / maxscroll;
  $("#agency").css("margin-top", margin + "px");
}); 

它对我来说效果很好，但多个用户有“滞后”行为。左侧有点奇怪地跳跃。

我发现 mac safari(有时是 chrome)上出现错误行为

编辑:如果需要，我已经制作了遇到的行为的视频:https://youtu.be/afKziooQLac

Answer 1

在较旧的设备上，这可能是由于滚动时触发滚动事件的频率造成的。它会连续触发多次，因此每秒会进行多次计算。旧设备无法跟上，导致滞后。通常，throttling是建议的解决方案，但模仿“粘性”效果或并行滚动当然不能很好地工作 - 但是，请参阅 discussion in the comments 。尝试将尽可能多的计算放在滚动处理程序之外，例如:

var win = $(window),
    maxscroll = $(document).height() - win.height(),
    agency = $("#agency"),
    h = ($("#projects").outerHeight(true) - agency.outerHeight(true)) / maxscroll;

win.scroll(function() {
  agency.css("margin-top", win.scrollTop() * h + "px");
});