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かけたことによりスクロール位置が0に戻って再度ハンバーガーメニュー押したらヘッダー引っ込んでしまったので150px以上の大きなスクロールはヘッダーを引っ込ませないようにする記述

Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。