スクロールの位置によって、テキストをフェードインさせるタイミングを調整したい。

前提・実現したいこと

どこまでスクロールしたかによって、テキストがフェードインされるタイミングを調整したい。

発生している問題

下記のコードでは中途半端な位置までスクロールすると、テキストが画面外であるにも関わらずフェードインされてしまう（だが、少し早く下にスクロールすれば、綺麗にフェードインされる）。
うまく説明できずに申し訳ありません。「画面のこの辺までスクロールしたら、このテキストをフェードインさせる！」というのを、可能にしたいのです。どうか、宜しくお願い致します。

該当のソースコード

HTML
<!DOCTYPE>
<html>
  <head>
    <script src="jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="na.js"></script>
    <link rel="stylesheet" href="nayami.css">
  </head>
  <body>
    <p>株式会社あああああ</p><br><br><br><br><br><br><br><br><br>
    <div class="a">あああああああ</div>
    <div class="b">あああああああ</div><br><br><br><br><br><br><br>
    <p id="fade">あああああ</p>
    <p id="fade2">いいいい</p>
    <br><br><br><br><br><br><br><br><br><br>
  </body>
</html>

css
.a{
  font-family: serif;
  width: 530px;
  font-size: 70px;
  border-bottom: solid 1px;
  animation-name: my-fade-in;
  animation-duration: 1.1s;
}

@keyframes my-fade-in {
  from {
    opacity: 0;
    transform: translatex(-500px);

  }
  to {
    opacity: 1;
  }
}

.b{
  font-size: 22px;
  font-family: serif;
  animation-name: my-fade-in2;
  animation-duration: 1.2s;
}

@keyframes my-fade-in2 {
   0% {
      opacity: 0;
      transform: translatey(-27px);
   }
   100% {
      opacity: 1;
      transform: translatey(0);
   }
}



#fade {
font-family: serif;
margin: 50px 0;
font-size: 40px;
font-weight: bold;
text-align: center;
}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}


#fade2 {
font-family: serif;
margin: 50px 0;
font-size: 20px;
font-weight: bold;
text-align: center;
}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

javascript
$('#fade').css('visibility','hidden');
$(window).scroll(function(){
 var windowHeight = $(window).height(),
     topWindow = $(window).scrollTop();
 $('#fade').each(function(){
  var targetPosition = $(this).offset().top;
  if(topWindow > targetPosition - windowHeight + 100){
   $(this).addClass("fadeInDown");
  }
 });
});

$('#fade2').css('visibility','hidden');
$(window).scroll(function(){
 var windowHeight = $(window).height(),
     topWindow = $(window).scrollTop();
 $('#fade2').each(function(){
  var targetPosition = $(this).offset().top;
  if(topWindow > targetPosition - windowHeight + 100){
   $(this).addClass("fadeInDown");
  }
 });
});