javascript - JS视差多元素位置

我想在三个元素上使用视差效果，但是我必须更改它们的每个位置，以便将图片放在顶部的正确位置（部分）。我尝试使用一些“如果”来更改“ paddTop”的值，但是当我这样做时，只有最后一个视差在起作用。这是我的代码：

（函数（）{

var parallax = document.querySelectorAll(".paralax, .parallax2, .parallax3"),
  speed = 0.35;

window.onscroll = function (){
  [].slice.call(parallax).forEach(function (el,i){

    if (parallax==document.querySelectorAll(".parallax")){
      var paddTop = 1500;
    }
    if (parallax==document.querySelectorAll(".parallax2")){
      var paddTop = 2200;
    }
    if (parallax==document.querySelectorAll(".parallax3")){
      var paddTop = 3000;
    }

    var windowYOffset = window.pageYOffset-paddTop,
        elBackgrounPos = "50% " + (windowYOffset * speed) + "px";

    el.style.backgroundPosition = elBackgrounPos;
    });
};

}）（）;

如果有人对为什么只有最后一个有效的想法有所了解，请告诉我。
JS并不是很好，所以也许会有一点错误，但这对我很有帮助。

谢谢 ！

[代码在下面的下一篇文章中更新了]

最佳答案

var parallax = document.querySelectorAll(".parallax"),
    parallax = document.querySelectorAll(".parallax2"),
    parallax = document.querySelectorAll(".parallax3"),
    speed = 0.35;

使用该parallax将始终保留最后一行（document.querySelectorAll(".parallax3")）的值，因为您将其分配了3次。

我想你的意思是这样的：

var parallax = document.querySelectorAll(".paralax, .parallax2, .parallax3");

选择所有这些元素。

老实说，很难猜出您要实现的目标，因为您提供（提供）的代码对我没有任何意义。

第一个问题是您将值分配给parallax三次，因此，猜想您希望有一个列表进行迭代，这是[].slice.call(parallax).foreach(…)的建议。

但是在回调中，您只需将全局设置的parallax与document.querySelectorAll()的结果进行比较，即可为paddTop分配一个值。

如果要根据paddTop的结果为document.querySelectorAll()分配一个值，而不必迭代parallax列表，则甚至根本不需要设置变量parallax，因为您只需检查如果有一些元素与您的查询匹配。

那么，您想要实现什么？

像这样：

var parallaxes = [
    [].slice.call(document.querySelectorAll(".parallax")),
    [].slice.call(document.querySelectorAll(".parallax2"))
];


parallaxes.forEach(function(elements, idx){
    if (idx == 0) {
        elements.forEach(function(element) {
            element.style.backgroundPosition = '…'
        })
    }

    if (idx == 0) {
        elements.forEach(function(element) {
            element.style.backgroundPosition = '…'
        })
    }

})