スクロールして画面に表示されたらイベントが発生する

やりたいこと

スクロールして要素が画面に表示されると同時にイベントを発生させたい。

stylesheet.scss

$(window).scroll(function () {
  $(".slide").each(function (index, el) {
    let scroll = $(window).scrollTop();
    let offset = $(el).offset().top;
    let winH = $(window).height();
    if (scroll > offset - winH / 2) {
      $(el).addClass("in");
    }
  });
});

表示させたい要素のクラス名が「slide」で、複数の要素に当てたいので、「each」を使って繰り返し処理をかけています。

とりあえず画面中央まで来たらイベントが発生するように記述していますが、winH/2の２の部分を、小さい数字に変えていくと、早くイベントを発生させることができますし、大きい数字に変えると遅くイベントを発生させることができます。

結論

elが何者かよくわかっていないのでこれからも勉強します。。
thisのようなものだとは聞いたがイマイチ…