Question

我有三个元素，我想使用视差效果，但我必须改变它们的每个位置，以便将图像从顶部放在正确的位置（部分）。我尝试了一些＆＃34; if＆＃34;改变＆＃34; paddTop＆＃34;的价值但是当我这样做时，只有最后一个视差才有效。这是我的代码：

（function（）{

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分配值。

如果您想根据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 = '…'
        })
    }

})

Answer 2

感谢您的帮助，

正如你所说的那样，我甚至对自己的代码感到非常困惑，所以我能理解你并没有得到它。我只想让几个视差具有不同的paddTop值（1500,1700和3200比pageYOffset小）。

看看你的回答我试过这个，运行＆＃34; if＆＃34;与更有意义的id。我还会把html和css放在一起，这样你就可以更好地了解和理解。

(function (){

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

window.onscroll = function (){
  [].slice.call(parallax).forEach(function (element,i,id){
    if (id == "parllax-1") {
            var windowYOffset = window.pageYOffset-1500; 
    }

    if (id == "parllax-2") {
            var windowYOffset = window.pageYOffset-1700;
    }

    if (id == "parllax-3") {
           var windowYOffset = window.pageYOffset-3200;
    }

    elBackgrounPos = "50% " + (windowYOffset * speed) + "px";
    element.style.backgroundPosition = elBackgrounPos;
  })
};
  })();

这是CSS：

.container {
  width: 100%;
  height: 55vh;
}

section#parallax-1 {
  background-image: url(../images/cabaneL.jpg);
  background-position: center top;
  background-repeat: no-repeat;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
section#parallax-2...

HTML：

<section class="parallax" id="parallax-1"><!-- down in the page #parallax-2 and #parallax-3 --> 
<div class="container">
  <div class="grid flex">
    <div class="absomid-cbp white7 corner"><a href="..."></a>
      ...
    </div><!-- END absomid --> 
  </div><!-- END grid --> 
</div>
</section>

即使它仍无法正常工作：（

JS视差多元素位置

2 个答案: