下にスクロールしたら消え、上にスクロールすると再表示される固定ヘッダーを実装する方法をご紹介いたします。
以前、素のJavaScriptで実装する方法はご紹介しましたが、今回はjQuery版です。
下にスクロールで非表示、上にスクロールで再表示する固定ヘッダーを実装する方法
固定ヘッダーのCSSはこんな感じです。transitionを追加しておくことで、ヌルっと表示/非表示されます。
header {
width: 100%;
padding: 10px 0;
position: fixed;
top: 0;
left: 0;
z-index: 3;
transition: all .3s ease;
}jQueryは以下のようにします。</body>の直前に追加すればOKです。
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
var hd_size = $('header').innerHeight(); //ヘッダーの高さを取得
var pos = 0;
$(window).on('scroll', function () {
var current_pos = $(this).scrollTop(); //現在の位置を取得
if (current_pos < pos || current_pos == 0) { //上にスクロール もしくは 最上部
$('header').css({ 'top': 0 }); //ヘッダーを表示
} else {
$('header').css({ 'top': '-' + hd_size + 'px' }); //ヘッダーを非表示(下にスクロール)
}
pos = current_pos;
});
});
</script>挙動を逆にする場合
上にスクロールで非表示、下にスクロールで再表示と、逆の動きにしたい場合は、以下のように記述します。if文の比較演算子を逆にするだけです。
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
var hd_size = $('header').innerHeight();
var pos = 0;
$(window).on('scroll', function () {
var current_pos = $(this).scrollTop();
if (current_pos > pos || current_pos == 0) {
$('header').css({ 'top': 0 });
} else {
$('header').css({ 'top': '-' + hd_size + 'px' });
}
pos = current_pos;
});
});
</script>あとがき
素のJavaScriptに比べるとコードの記述量も少ないです。脱jQueryの動きが盛んになってきていますが、なんだかんだでjQueryを使うと楽ですね。