Jquery 带页边空白的双滚动条上的滞后

我为一个有两个不同高度栏的网站制作的jquery函数有一个问题，它应该以不同的速度滚动在一起

在这里你可以找到小提琴：

这对我来说有点好，但是多用户有一种“滞后”行为。左边有点奇怪

我发现mac safari（有时是chrome）上出现了错误的行为

---

编辑：如果需要，我已经制作了一个遇到行为的视频：

在旧设备上，这可能是由于滚动时触发滚动事件的频率造成的。它按顺序触发多次，因此计算每秒执行多次。旧设备跟不上，这会导致滞后。通常情况下，这是建议的解决方案，但要模拟“粘性”效果或并行滚动，当然效果不好——不过，请参阅。尝试将尽可能多的计算放在滚动处理程序之外，例如：

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");
}); 

---

请使用+，而不是-

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");
}); 

---

节流是否仍然足够平滑，看起来很好？例如使用requestAnimationFrame？@arbuthnott。但我想你必须对所有浏览器进行基准测试，看看滚动事件每秒切换多少次，然后在你的节流中使用一个小于这个值但仍然平滑的间隔。我没有时间测试它，但事实上-在企业环境中，这就是你测试它的方式，看看什么是最好的。如果需要的话，我已经制作了一个遇到的行为的视频：@Leeroy521 Firefox handles scroll与Chrome不同。Firefox可能会触发更少/更多的事件，从而导致这种行为。我没有解决这个问题。对我来说，在chrome上，它根本不移动，而且滚动速度非常慢。在firefox上，它做了一个缓慢的上下移动，对我来说，它在FF v 56.0.1（64位）和Chrome版本62.0.3202.62（官方版本）（64位）中工作得非常完美，但微软Edge是不稳定的

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");
});