Question

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

在这里你可以找到小提琴： 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");
});

Answer 2

请使用+，而不是 -

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

双边卷轴滞后，边缘顶部

2 个答案: