クラス名を共有する特定の要素をどのようにターゲットできますか？

Question

私のサイトには共通のクラスを共有する一連の画像があります。ウィンドウを下にスクロールすると、だけがフェードインし、現在ビューポート内にある画像がになります。

私が持っているものは、働いていますが、今のところそれはすべてか全くありません。最初の画像がビューポートに入ると、すべての画像がフェードインします。理想的には、ビューポートに入るときに1つずつフェードインさせたいと思います。

私はdivのスクロールいます - overflow-y: scroll;

を使用していない実際のウィンドウを私はviewportプラグインを使用して試してみましたが、私はまだ同じ結果を取得しています。

ここでは、画像のスクロール+フェードを聞くために使用しているjQueryを示します。私は一度にすべてをやっている理由を理解しています - 私はちょうど画像（クラス）の配列から各画像を分離する方法に掛かっています。

$('.section-container section:nth-child(2)').scroll(function() { 
    $('.img-chart').each(function (key, val) { 
     var $chart = $(val); // Give me a jquery object of the element(s). 
     var src = $chart.prop('src'); 

     if (isInView($chart)) { 
      console.log('in view: ' + $chart); // this is returning every image. I would like to get only the one that is currently in the viewport. 
      // Do stuff with the $chart element.  
     } 
    }); 
}); 


var isInView = function ($element) { 
    var win = $(window); 
    var obj = $element; 
    var scrollPosition = win.scrollTop(); 
    var visibleArea = win.scrollTop() + win.height(); 
    var objEndPos = (obj.offset().top + obj.outerHeight()); 

    return (visibleArea >= objEndPos && scrollPosition <= objEndPos ? true : false) 
}; 

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

EDIT

は、プラグインを削除するために私のスクリプトを更新しました。多分それが私の欠陥を明らかにするのに役立つだろう。

EDIT 2

特定の画像がビューポートであるとき、それは見ているようです。 私がスクロールすると、これが表示されます（表示されているものを記録しています）。

これは私がイメージは実際のビューにある場合にスクロールし続けた場合、私はこれを取得、そのクラスを持つすべての画像をフェードインさせている

in view: http://farmersdeliver.dev/assets/img/img01.png 
in view: http://farmersdeliver.dev/assets/img/img02.png 
in view: http://farmersdeliver.dev/assets/img/img03.png 

：ログが「21」

[21] in view: http://farmersdeliver.dev/assets/img/img01.png 
in view: http://farmersdeliver.dev/assets/img/img02.png 
in view: http://farmersdeliver.dev/assets/img/img03.png 

。もちろんイベントです。それでそれを正しく見ている。私はすぐにすべてを表示しないように正しいロジックを持っていません。

Answer 1

$.eachのいいところは、thisがイテレータの現在の要素にバインドされていることです。

$('.img-chart:in-viewport').each(function (key, val) { 
    if ($(this).offset().top + < $(window).scrollTop()) { // If top of element is in view 
     // Your other conditions 
     $(this).show(); //Or whatever you need to do 
    } 
}); 

要素が表示されているかどうかを調べることは、ウィンドウのスクロールに対してオフセットを確認することと同じくらい簡単です。