jquery each を使っても同時に処理が行われてしまいます

Question

jqueryを使って、スクロールされたら、要素を表示させようと思い、eachを使ったのですが、最初の要素が現れた時に、同時にすべての要素が一緒に表示されてしまいます。
それぞれの高さにスクロールされた時に、別々に表示したいのですが、どこのコードが間違っているのでしょうか？

<section class="elm">
<div class="overlay"></div>
<div class="titleLine"></div>
</section>
<section class="elm">
<div class="overlay"></div>
<div class="titleLine"></div>
</section>
<section class="elm">
<div class="overlay"></div>
<div class="titleLine"></div>
</section>
<section class="elm">
<div class="overlay"></div>
<div class="titleLine"></div>
</section>

.overlay{
	opacity: 0;
	transition: 1.5s;
}
.overlay.fadeOn{
	opacity: 1;
}
.titleLine{
	opacity: 0;
}
.titleLine.fadeOn{
	opacity: 1;
}

$(window).on('scroll',function (){
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();

 $('.elm').each(function(){
    var elmPos = $(this).offset().top;
    if (scroll > elmPos - windowHeight + windowHeight/3){

      var elmWhatOverlay = $('.overlay');
      var elmWhatTitleLine = $('.titleLine');

      elmWhatOverlay
      .add(elmWhatTitleLine)
      .addClass('fadeOn');

      } else {
      // $(this).removeClass('fadeOn');
     }
   }
 });
});

Comments

[kei344]

「elmWhatOverlay」など定義されていない変数があります。なるべく省略せずに、問題が再現できるコードを提示されたほうが回答につながります。

[kei344]

.overlayや.titleLineがHTML上に有りませんよ。

Answer 1

      var elmWhatOverlay = $('.overlay',this);
      var elmWhatTitleLine = $('.titleLine',this);

Comments

[tetoro]

何も動作がしませんでした。コンソールの方も何も表示されません。

[kei344]

動くサンプル： https://jsfiddle.net/4e5dh1o8/

[tetoro]

ご丁寧にありがとうございました！
ちなみに、$('.overlay',this);　のように、第二引数のthisはどういう処理になるのでしょうか？

[kei344]

仕様を読んでください。

【jQuery() | jQuery API Documentation】
https://api.jquery.com/jQuery/#jQuery1