最終更新日：2022.06.09 [木]　公開日：2022.03.30 [水]　カテゴリー：html・CSS・jQuery・JS備忘

よくヘッダーとかでも見るアレです。
スクロールして、それが表示されたらヘッダーに固定される！みたいな。
説明が難しいのでデモページ。

HTML

  
 ここはヘッダーです！ 

CSS

	.box1{
		width:100%;
		height:100px;
		margin-top:300px;
		background-color: #f00;
	}
	.fix_op{
		position: fixed;
		top:-300px;
		left:0;
	
	}
	
	#wrapper{
		height:1500px;
	}

jQuery

jQuery(function () {
			const box1_top = $('.box1').offset().top;
			console.log(box1_top);
			
  $(window).scroll(function(){
			const scroll_top = $(this).scrollTop();
			console.log(scroll_top);
	  
	  if (box1_top <= scroll_top){
			console.log('超えたのでここからヘッダーフィックスね！');
		   $('.box1').addClass('fix_op');
		 }else{
			 $('.box1').removeClass('fix_op');
		 }
  });
	});		
			
			

offset().top：要素のトップからの距離
scrollTop();スクロールした距離

この２つを比較してスクロールが超えた瞬間に固定したいボックスにクラス名をつけて
そのクラスにfixさせるスタイルを当てている・・・と言うだけの、ごくシンプルなものです。

別にヘッダーに限らず、また、fixに限らず、スクロール量と位置を比較して・・・て言うこの方法は、いかようにも、なんとでも使えるかと思います。ので、備忘。