JS параллакс положение нескольких элементов

Question

У меня есть три элемента, на которых я хочу использовать эффект параллакса, но я должен изменить каждую их позицию, чтобы изображение было в нужном месте (сечении) сверху. Я попытался с некоторым "если" изменить значение "paddTop", но только последний параллакс работает, когда я делаю это. Вот мой код:

(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).

Глядя на ваш ответ, я попробовал это, запустив "если" с идентификатором, который имеет больше смысла. Я также добавлю 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>

Хотя он все еще не работает:(