[jQuery] ヘッダーナビゲーションを下スクロールで隠して上スクロールで再表示させたい

公開日:2023/08/18

ページをスクロールした際のヘッダーナビゲーションの固定方法として、下スクロールしたときには非表示にし、上スクロールしたときに再表示するという方法があります。

下スクロールしているときはコンテンツの表示を優先し、上スクロールしたときにはページの回遊を促すという形になり、上スクロール時に動的にナビゲーションが表示されるため、ナビゲーションへの視線誘導もされやすい効果が見込めます。

本記事では、上下のスクロールによってヘッダーナビゲーションの表示を制御するサンプルコードをご紹介します。

サンプルコード

html

<header class="header">

</header>

CSS

.header {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1;
    width: 100%;
    height: 100px;
    background-color: #3388dd;
    transition: transform 0.5s;
}
.header.js_hide {
    transform: translateY(-100%);    
}

ヘッダーは「position: fixed;」で固定表示し、「js_hide」クラスが有効になったときにヘッダーの高さ分上方向にずらすことで画面外に隠します。

jQuery

const header = $('.header');
const headerHeight = header.outerHeight();
let beforeScrollTop = 0;
$(window).scroll(function () {
    const scrollTop = $(this).scrollTop();
    if((scrollTop > beforeScrollTop) && (scrollTop > headerHeight)) {
        header.addClass('js_hide');
    }
    else {
        header.removeClass('js_hide');
    }
    beforeScrollTop = scrollTop;
});

スクロールが発生するたびにスクロール位置を取得し、ヘッダーを隠すか表示するかチェックを行い、スクロール位置を保持しておきます。

スクロール位置が前回のスクロール位置とヘッダーの高さ双方よりも大きければヘッダーを隠し、それ以外ではヘッダーを表示します。

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。