ブラウザをスクロールする度、テキストがフェードインされるようにしたい。

発生している問題

下記のコードを実行すると、フェードインされずにテキスト自体がブラウザに映らなくなってしまいます。
どうか、宜しくお願い致します。

該当のソースコード

html
1<html>
2  <head>
3    <meta charset="utf-8">
4    <title>株式会社ああああああ</title>
5    <link href="nayami.css" rel="stylesheet">
6  </head>
7  <body>
8    <p class="font1">あああああああああ</p><br><br><br><br><br>
9　　　<div class="fadein">ああああああああ</div></section>
10    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
11      <div class="fadein">ああああああああ</div>
12    <div class="fadein">あああああああああ</div>
13    <div class="fadein">あああああああ</div>
14    <div class="fadein">あああああああ</div>
15    <script type="text/javascript" src="na.js/jquery-3.5.1.min.js"></script>
16  </body>
17</html>
18

css
1.fadein {
2        height: 150px;
3        background: #999;
4        opacity: 0;
5        transition: opacity .4s;
6    }
7    .fadein.scrollin {
8        opacity: 1;
9    }

jquery
1function scroll_fadein(){
2    jQuery('.fadein').each(function(){
3        var elemPos = jQuery(this).offset().top;
4        var scroll = jQuery(window).scrollTop();
5        var windowHeight = jQuery(window).height();
6        if (scroll > elemPos - windowHeight + 300){
7            jQuery(this).addClass('scrollin');
8        }
9    });
10}
11
12jQuery(function(){
13    jQuery(window).scroll(function (){
14        scroll_fadein();
15    });
16    scroll_fadein();
17});
18