web関連

【jquery】上にスクロールしたらヘッダー出す

2019/12/27

2020/01/11

上にスクロールしたらヘッダーを出して下にスクロールしたら隠すって機能を実装したときの備忘録

上下スクロールでヘッダーの表示非表示

先にデモ

 

HTML、css

header{
	transition: all 0.3s ease;
	position: fixed;
	top: 0;
	left:0;
	right: 0;
}
<header>
…
</header>

ヘッダーは固定ヘッダーが大前提

easingはcssで調整

 

jquery

jQuery(function($){
  var hsize = $('header').innerHeight();//paddingを含めた高さを取得
  var pos = 0;
  $(window).on('scroll', function(){
    var currentPos = $(this).scrollTop();
    if(currentPos < pos || currentPos == 0 ){
    //上スクロール時の処理(header引っ込める)
    $("header").css({"top":0});
    }else{
    //下スクロール時の処理(header出す)
    $("header").css({'top' : "-" + hsize + "px" });
    }
    pos = currentPos;//現在地保存
  });
});

.css()で制御しなくてもaddClass/removeClassでcss側で全部制御すんのでもいいと思う