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

前提・実現したいこと

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

発生している問題

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

該当のソースコード

HTML
1<!DOCTYPE>
2<html>
3  <head>
4    <script src="jquery-3.5.1.min.js"></script>
5    <script type="text/javascript" src="na.js"></script>
6    <link rel="stylesheet" href="nayami.css">
7  </head>
8  <body>
9    <p>株式会社あああああ</p><br><br><br><br><br><br><br><br><br>
10    <div class="a">あああああああ</div>
11    <div class="b">あああああああ</div><br><br><br><br><br><br><br>
12    <p id="fade">あああああ</p>
13    <p id="fade2">いいいい</p>
14    <br><br><br><br><br><br><br><br><br><br>
15  </body>
16</html>
17

css
1.a{
2  font-family: serif;
3  width: 530px;
4  font-size: 70px;
5  border-bottom: solid 1px;
6  animation-name: my-fade-in;
7  animation-duration: 1.1s;
8}
9
10@keyframes my-fade-in {
11  from {
12    opacity: 0;
13    transform: translatex(-500px);
14
15  }
16  to {
17    opacity: 1;
18  }
19}
20
21.b{
22  font-size: 22px;
23  font-family: serif;
24  animation-name: my-fade-in2;
25  animation-duration: 1.2s;
26}
27
28@keyframes my-fade-in2 {
29   0% {
30      opacity: 0;
31      transform: translatey(-27px);
32   }
33   100% {
34      opacity: 1;
35      transform: translatey(0);
36   }
37}
38
39
40
41#fade {
42font-family: serif;
43margin: 50px 0;
44font-size: 40px;
45font-weight: bold;
46text-align: center;
47}
48
49.fadeInDown {
50 -webkit-animation-fill-mode:both;
51 -ms-animation-fill-mode:both;
52 animation-fill-mode:both;
53 -webkit-animation-duration:1s;
54 -ms-animation-duration:1s;
55 animation-duration:1s;
56 -webkit-animation-name: fadeInDown;
57 animation-name: fadeInDown;
58 visibility: visible !important;
59}
60@-webkit-keyframes fadeInDown {
61 0% { opacity: 0; -webkit-transform: translateY(-20px); }
62 100% { opacity: 1; -webkit-transform: translateY(0); }
63}
64@keyframes fadeInDown {
65 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
66 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
67}
68
69
70#fade2 {
71font-family: serif;
72margin: 50px 0;
73font-size: 20px;
74font-weight: bold;
75text-align: center;
76}
77
78.fadeInDown {
79 -webkit-animation-fill-mode:both;
80 -ms-animation-fill-mode:both;
81 animation-fill-mode:both;
82 -webkit-animation-duration:1s;
83 -ms-animation-duration:1s;
84 animation-duration:1s;
85 -webkit-animation-name: fadeInDown;
86 animation-name: fadeInDown;
87 visibility: visible !important;
88}
89@-webkit-keyframes fadeInDown {
90 0% { opacity: 0; -webkit-transform: translateY(-20px); }
91 100% { opacity: 1; -webkit-transform: translateY(0); }
92}
93@keyframes fadeInDown {
94 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
95 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
96}
97

javascript
1$('#fade').css('visibility','hidden');
2$(window).scroll(function(){
3 var windowHeight = $(window).height(),
4     topWindow = $(window).scrollTop();
5 $('#fade').each(function(){
6  var targetPosition = $(this).offset().top;
7  if(topWindow > targetPosition - windowHeight + 100){
8   $(this).addClass("fadeInDown");
9  }
10 });
11});
12
13$('#fade2').css('visibility','hidden');
14$(window).scroll(function(){
15 var windowHeight = $(window).height(),
16     topWindow = $(window).scrollTop();
17 $('#fade2').each(function(){
18  var targetPosition = $(this).offset().top;
19  if(topWindow > targetPosition - windowHeight + 100){
20   $(this).addClass("fadeInDown");
21  }
22 });
23});

行動規範の内容に同意します

回答1件

ベストアンサー

修正箇所はコメントを参照してください。
fadeInDownがフェードインというよりも文字が飛び跳ねるような動きですがあってますか？

javasclipt
1$('#fade').css('visibility','hidden');
2$(window).scroll(function(){
3  $('#fade').each(function(){
4    var nScrollTop = $(window).scrollTop();        // 現在のスクロール位置
5    var targetPosition = $(this).offset().top;     // 表示切替ターゲットの位置
6    if((targetPosition - 150) < nScrollTop){       // 表示切替ターゲットの位置から150px上と現在のスクロール位置で判定(150は調整してね)
7      if($(this).hasClass('fadeInDown') == false){ // 'fadeInDown'が設定されていない場合
8        $(this).addClass("fadeInDown");            // 'fadeInDown'の追加
9      }
10    }else{
11      if($(this).hasClass('fadeInDown') == true){  // 'fadeInDown'が設定されている場合
12        $(this).removeClass("fadeInDown");         // 'fadeInDown'の削除
13      }
14    }
15  });
16});
17
18$('#fade2').css('visibility','hidden');
19$(window).scroll(function() {
20  $('#fade2').each(function(){
21    var nScrollTop = $(window).scrollTop();        // 現在のスクロール位置
22    var targetPosition = $(this).offset().top;     // 表示切替ターゲットの位置
23    if((targetPosition - 150) < nScrollTop){       // 表示切替ターゲットの位置から150px上と現在のスクロール位置で判定(150は調整してね)
24      if($(this).hasClass('fadeInDown') == false){ // 'fadeInDown'が設定されていない場合
25        $(this).addClass("fadeInDown");            // 'fadeInDown'の追加
26      }
27    }else{
28      if($(this).hasClass('fadeInDown') == true){  // 'fadeInDown'が設定されている場合
29        $(this).removeClass("fadeInDown");         // 'fadeInDown'の削除
30      }
31    }
32  });
33});
34