スクロールして要素が表示されたらクラスを付与したい（ただし同じクラスが複数ある）

Question

以下のHTMLのように同じクラス名が複数あるのですが、一つずつに対して「スクロールして要素が表示されたらクラス付与」をやりたいです。

<section>
  <div class="ttile">title</div>
  <div class="detail">detail</div>
</section>
<section>
  <div class="ttile">title</div>
  <div class="detail">detail</div>
</section>

下記のようにすると、たぶんクラスが複数あるせいだと思うのですが一気にすべてにis-showが付与されてしまいます。

$(window).on('scroll', function() {
	add_class_in_scrolling( $('.title') );
	add_class_in_scrolling( $('.detail') );
});
 
// スクロールで要素が表示された時にclassを付与する
function add_class_in_scrolling( $target ) {
	var winScroll = $(window).scrollTop();//スクロールの上下位置を取得
	var winHeight = $(window).height();//ウィンドウの高さを取得
	var scrollPos = winScroll + winHeight;//上記の合計（スクロールポジション）
 
	if($target.offset().top < scrollPos) {//classをつけたい要素の上下位置がスクロールポジションより小さい場合＝ウィンドウ内に表示された場合
		$target.addClass('is-show');
	}
}

読み込み時にこれらの同一クラスに番号を振ったらどうかと思ったのですが、スクロール時に表示された要素が何番なのか取得できずにこの方法も見送りました。

$('.I_FrontDesc_title').each(function(n){
  $(this).addClass('number-' + n)
});

どうしたら今回のように同じクラスが複数あるケースでもできるようになりますか？

Comments

[yambejp]

表示されていないときにクラスをはずす意味はあるのでしょうか？
ないなら、つねにクラスがつけておけば済むだけでは？

[huwatoro]

is-showでアニメーションをスタートさせたいので…

Answer 1

function add_class_in_scrolling( $target ) {
    var winScroll = $(window).scrollTop();//スクロールの上下位置を取得
    var winHeight = $(window).height();//ウィンドウの高さを取得
    var scrollPos = winScroll + winHeight;//上記の合計（スクロールポジション）
    $target.each(function(){
      if($(this).offset().top < scrollPos) {
          $(this).addClass('is-show');
      }
    });
}

Comments

[huwatoro]

ありがとうございます！ずっと悩んでおりましたので大変助かりました。$targetは複数わたしつつeachで一つずつ判定すればよかったんですね。本当にありがとうございます。