スクロールに合わせたいのに読み込み後にフェードインしてしまいます

WordPressでページのスクロールに合わせてボックスをフェードインさせたいのですが、サイトを読み込んだ時点でフェードインしてしまいます。
どこがいけないのでしょうか。ご指摘お願いします。

JavaScript
1$(function(){
2	$(window).scroll(function (){
3		$('.fadein').each(function(){
4			var elemPos = $(this).offset().top;
5			var scroll = $(window).scrollTop();
6			var windowHeight = $(window).height();
7			if (scroll > elemPos - windowHeight + 200){
8				$(this).addClass('scrollin');
9			}
10		});
11	});
12});

html
1 <div class="fadein">
2			   <h6><span>01</span>a</h6>
3			   <p>a</p>
4		   </div>
5		   <div class="fadein">
6			   <h6><span>02</span>b</h6>
7			   <p>b</p>
8		   </div>
9		   <div class="fadein">
10			   <h6><span>03</span>c</h6>
11			   <p>c</p>
12		   </div>
13		   <div class="fadein">
14			   <h6><span>04</span>d</h6>
15			   <p>d</p>
16		   </div>

css
1.fadein{
2	background-color: #fff;
3	border-radius: 240px 15px 100px 15px / 15px 200px 15px 185px;
4	border: 6px solid #333;
5	margin-bottom: 2%;
6	opacity : 0;
7	visibility: hidden;
8	transition: 4s;
9	transform: translateY(200px);
10}
11.scrollin {
12	opacity: 1;
13	visibility: visible;
14	transform: translateY(0);
15	}