Javascript 滚动垂直视差

我正在制作一个简化的垂直视差（类似于）

我得到了一个答案——代码在技术上是有效的，但每次滚动后我都会在重新绘制时产生一种不安的效果——看起来javascript出现得很晚。知道为什么吗？我看不出剧本中有什么真正突出的地方

var getYPosition = function() {
  if (typeof(window.pageYOffset) == 'number') {
    return window.pageYOffset;
  } else {
    return document.documentElement.scrollTop;
  }     
};

$(document).ready(function(){
  var sections = $(".section");
  $(window).scroll(function() {
    var x = getYPosition(),
    y = Math.floor(x / 1600),
    z = $(sections[y]).offset();
    $(sections[y]).css("background-position", "0 " + (getYPosition() - z.top)/2 + "px");
  });
});

---

您应该检查您的滚动回调调用是否太频繁。如果是这种情况，您可以尝试使用setInterval来限制重新招标的次数：

---

看起来图像移动了两次-首先是通过浏览器滚动，然后是通过

scroll（）

处理程序。因此抖动

---

通过对图像使用

position:fixed

或

background attachment:fixed

可以获得更清晰的效果-这样，图像不受浏览器滚动的影响，但会被

scroll（）

处理程序移动。你将不再有一种效果与另一种效果战斗。您必须相应地修改您的

scroll（）

处理程序。

天哪，这太烦人了。我们能让这种时尚很快消失吗？我在喝醉的时候看着它，这不是一个好主意；我甚至不知道财产的存在。谢谢这不是解决这个问题所需要的，而是一种很好的技术。谢谢。对于任何非平凡的JavaScript项目，你应该考虑使用下面的方法，它有一个方法，叫做“代码>节流< /代码>。

var outerPane = $details.find(".details-pane-outer"),
    didScroll = false;

$(window).scroll(function() {
    didScroll = true;
});

setInterval(function() {
    if ( didScroll ) {
        didScroll = false;
        // Check your page position and then
        // Load in more results
    }
}, 250); //in miliseconds