大阪府堺市のWEB制作(ホームページ制作)事務所です

[jQuery]スクロールして、要素が現れたら、固定(fix表示)になるみたいなやつ(offset()とscrollTop()比較)

最終更新日: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();スクロールした距離

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

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


スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA