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

Question

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

該当のソースコード

$(window).on('load',function(){$(function($) {
		var fixClass = 'fixed';
		var contentsPOS=[];
		for(var i=0;i<3;i++){
					contentsPOS[i] = $('.text-box').eq(i).offset().top;
					console.log(contentsPOS[i]);
		}
		$(window).on('load scroll resize', function(){
				var scrollTop = $(window).scrollTop();
				console.log(scrollTop);
				for(var i=0;i<3;i++){
					if (scrollTop>=contentsPOS[i]-50){
							$('.text-box').eq(i).addClass(fixClass);
						} else {
							$('.text-box').eq(i).removeClass(fixClass);
						}
				}
			});
		});
	});

.text-box {
    padding: 50px 25px;
    width: 480px;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
}
.text-box .catch {
    margin: 0 0 10px;
    font-size: 40px;
}
.text-box .copy {
    margin: 0;
    line-height: 2;
}

		/*その他の修正*/
h1{
	color:white;
	position:absolute;
	left:43%;
	top:50%;
	font-size: 5vw;
}

.fixed.text-box{
	position:fixed;
	top:50px;
	left:0;
	transform:translate3d(0,0,0);
}

		
						
			<article>			
					<section id="contents">
					<div id="content01" class="contents">
						<div id="content01_bg" class="background"></div>
                         <div class="wrap">
								
									<div class="titletext">
									<h1>Course</h1>
									</div>
								
							</div>
						</div><!-- content01 -->
						<div id="content02" class="contents">
							<div id="content02_bg" class="background"></div>
							<div class="wrap">
								<div class="text-box">
									<p class="catch">コンテンツ2</p>
									<p class="copy">テキスト</p>
								</div>
							</div>
						</div><!-- content02 -->
						<div id="content03" class="contents">
							<div id="content03_bg" class="background"></div>
							<div class="wrap">
							<div class="text-box">
									<p class="catch">コンテンツ3</p>
									<p class="copy">テキスト</p>
								</div>
							</div>
						</div><!-- content03 -->
						<div id="content04" class="contents">
							<div id="content04_bg" class="background"></div>
							<div class="wrap">
							<div class="text-box">
									<p class="catch">コンテンツ4</p>
									<p class="copy">テキスト</p>
								</div>
							</div>
						</div><!-- content04 -->
				</section>
			</article>
		
	</body>
</html>

試したこと

ページの読み込みが全て終わってからjsを実行すれば改善されるかと思い$(window).on('load',function(){としてみましたが結果はかわりませんでした。

Answer 1

「スクロールしてテキストがウィンドウのてっぺんにきたときに、それを固定させるもの」でしたらjQueryではなく、cssの position: sticky;がおすすめです。

position: sticky;の詳しい使い方についてはこちらを参照してください。

https://developer.mozilla.org/ja/docs/Web/CSS/position
https://coliss.com/articles/build-websites/operation/css/css-position-sticky-how-it-really-works.html

また、IEにも対応させたい場合にはPolyfillが必要になるので、こちらを追加してください。
https://github.com/wilddeer/stickyfill

Comments

[banga]

迅速な回答ありがとうございました。jQueryを使って実装することにとらわれていましたがposition:stickyを使うことで思っていた通りのものが出来ました。ありがとうございます。