web関連
【jquery】上にスクロールしたらヘッダー出す
上にスクロールしたらヘッダーを出して下にスクロールしたら隠すって機能を実装したときの備忘録
上下スクロールでヘッダーの表示非表示
先にデモ
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側で全部制御すんのでもいいと思う
メモ：ハンバーガーメニューで全画面メニューを使っていた時
if($(this).scrollTop() < pos || $(this).scrollTop() < 150 || $(this).scrollTop() - pos > 150){
っていう書き方にした
「$(this).scrollTop() < 150」は上から150pxの時は有無言わず表示
「$(this).scrollTop() - pos > 150」は固定ヘッダーでハンバーガーメニュー押したらposition:fixedかけたことによりスクロール位置が０に戻って再度ハンバーガーメニュー押したらヘッダー引っ込んでしまったので150px以上の大きなスクロールはヘッダーを引っ込ませないようにする記述