スクロールしてコンテンツが上にきたときに固定したい

スクロールしてテキストがウィンドウのてっぺんにきたときに、それを固定したいのですがコンテンツの位置をうまく取れません。
jqueryでoffsetを使って三つのtext-boxの位置を取得したいのですが二つ目と三つ目のtext-boxの位置がずれてしまいます。

該当のソースコード

jQuery
1$(window).on('load',function(){$(function($) {
2		var fixClass = 'fixed';
3		var contentsPOS=[];
4		for(var i=0;i<3;i++){
5					contentsPOS[i] = $('.text-box').eq(i).offset().top;
6					console.log(contentsPOS[i]);
7		}
8		$(window).on('load scroll resize', function(){
9				var scrollTop = $(window).scrollTop();
10				console.log(scrollTop);
11				for(var i=0;i<3;i++){
12					if (scrollTop>=contentsPOS[i]-50){
13							$('.text-box').eq(i).addClass(fixClass);
14						} else {
15							$('.text-box').eq(i).removeClass(fixClass);
16						}
17				}
18			});
19		});
20	});

css
1.text-box {
2    padding: 50px 25px;
3    width: 480px;
4    background-color: rgba(0,0,0,0.5);
5    color: #fff;
6}
7.text-box .catch {
8    margin: 0 0 10px;
9    font-size: 40px;
10}
11.text-box .copy {
12    margin: 0;
13    line-height: 2;
14}
15
16		/*その他の修正*/
17h1{
18	color:white;
19	position:absolute;
20	left:43%;
21	top:50%;
22	font-size: 5vw;
23}
24
25.fixed.text-box{
26	position:fixed;
27	top:50px;
28	left:0;
29	transform:translate3d(0,0,0);
30}
31

HTML
1
2		
3						
4			<article>			
5					<section id="contents">
6					<div id="content01" class="contents">
7						<div id="content01_bg" class="background"></div>
8                         <div class="wrap">
9								
10									<div class="titletext">
11									<h1>Course</h1>
12									</div>
13								
14							</div>
15						</div><!-- content01 -->
16						<div id="content02" class="contents">
17							<div id="content02_bg" class="background"></div>
18							<div class="wrap">
19								<div class="text-box">
20									<p class="catch">コンテンツ2</p>
21									<p class="copy">テキスト</p>
22								</div>
23							</div>
24						</div><!-- content02 -->
25						<div id="content03" class="contents">
26							<div id="content03_bg" class="background"></div>
27							<div class="wrap">
28							<div class="text-box">
29									<p class="catch">コンテンツ3</p>
30									<p class="copy">テキスト</p>
31								</div>
32							</div>
33						</div><!-- content03 -->
34						<div id="content04" class="contents">
35							<div id="content04_bg" class="background"></div>
36							<div class="wrap">
37							<div class="text-box">
38									<p class="catch">コンテンツ4</p>
39									<p class="copy">テキスト</p>
40								</div>
41							</div>
42						</div><!-- content04 -->
43				</section>
44			</article>
45		
46	</body>
47</html>