javascript - JS视差多元素位置

Question

我想在三个元素上使用视差效果，但我必须更改它们的每个位置，以便使图片位于从顶部开始的正确位置(部分)。我尝试用一​​些“if”来改变“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，所以可能会有点错误，但它真的会帮助我。

谢谢!

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

Answer 1

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

parallax 将始终保留最后一行 (document.querySelectorAll(".parallax3")) 的值，因为您将它分配了三次。

我猜你的意思是这样的:

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

选择所有这些元素。

老实说，很难猜到你想要实现什么，因为你提供的代码对我来说没有任何意义。

第一个问题是你将值赋给 parallax，三次，所以我猜你想要一个列表来迭代，什么 [].slice.call( parallax).foreach(…) 建议。

但在回调中，您只需将全局设置的 parallax 与 document.querySelectorAll() 的结果进行比较，以将值分配给 paddTop.

如果你想根据 document.querySelectorAll() 的结果给 paddTop 赋值，你不需要迭代 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 = '…'
        })
    }

})