JS視差複数の要素の位置

Question

視差効果を使用する3つの要素がありますが、上から正しい場所（セクション）に画像を配置するために、それぞれの位置を変更する必要があります。私は "paddTop"の値を変更するためにいくつかの "if"を試しましたが、最後の視差のみが働いています。ここに私のコードは次のとおり

（関数（）{

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にはあまりよくないですが、多少の間違いかもしれませんが、本当に助けになります。

ありがとうございました！

は、あなたがそれを三回を割り当てているので、常に最後の行（ document.querySelectorAll(".parallax3")）の値を保持すること parallaxで

Answer 1

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

[以下のコードは、私の次のポストで更新します]。

私はあなたがそのような何かを意味推測：

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

は、これらの要素をすべて選択します。

正直なところ、あなたが提供するコード（提供されている）は私には意味をなさないので、達成しようとしていることを推測するのは非常に難しいです。

最初の問題は、parallaxに値を3回割り当てていたため、繰り返しを繰り返すリストがあると推測されました。つまり、[].slice.call(parallax).foreach(…)は何を示唆していますか？

しかし、コールバック内では、グローバルに設定されたparallaxとdocument.querySelectorAll()の結果を単純に比較し、paddTopに値を割り当てます。

あなたがparallaxリストを反復処理するしないでくださいdocument.querySelectorAll()の結果に応じてpaddTopに値を代入したい場合は、いくつかがある場合、あなただけをチェックするので、あなたも、全くのセットアップ変数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（pageYOffsetより小さい1500,1700,3200）の異なる値でいくつかの視差を持たせたいと思います。

あなたの答えを見ると、私はこれを試しました。より理にかなったIDで "if"を実行しています。また、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> 

それはまだはい、私がいた、という試みた:(