【JavaScript】フェードインが完了したらスクロールの監視を終了する方法を教えていただけないでしょうか。

前提・実現したいこと

初めて質問します。よろしくお願いいたします。
コーディング歴は半年で、js はプラグインに頼るばかりであまり経験がありません。

下記の一連の動作を js または jQuery で作る方法を教えていただきたいです。

スクロールで画像がフェードイン
フェードインした画像のみスクロールの監視が終了
その他の画像はフェードインするまでスクロールの監視が継続
最終的に、すべての画像のフェードインが完了すると

スクロールによる監視は完全に終了

発生している問題

上記2番目の「フェードインした画像のみスクロールの監視が終了」
という部分の実装ができません。

該当のソースコード

html
1<p><img class="fade" src="" alt=""></p>
2<p><img class="fade" src="" alt=""></p>
3<p><img class="fade" src="" alt=""></p>
4<p><img id=“js-stop” class="fade" src="" alt=""></p> <!-- これがフェードインすると監視終了 -->

css
1.fade {
2  opacity : 0;
3  transition: opacity 2s;
4}
5
6.fade-in {
7  opacity: 1;
8}

js
1  //  スクロール量を検知し、フェードインする
2  function animation() {
3    $('.fade').each(function () {
4      var target = $(this).offset().top;
5      var scroll = $(window).scrollTop() - 200;
6      var windowHeight = $(window).height();
7      if (scroll > target - windowHeight) {
8        $(this).addClass('fade-in');
9      }
10    });
11  }
12
13  //  #js-stop（4つ目の画像）がフェードインすると監視終了
14  animation();
15  var stop = document.getElementById('js-stop');
16  $(window).scroll(function () {
17    if (stop.classList.contains('fade-in') == true) {
18      return false;
19    } else {
20      animation();
21    }
22  });