下スクロールで消えて、上スクロールで出てくるグローバルナビゲーションを作る

最近、下スクロールで消えて、上スクロールで出てくるグローバルナビゲーションを見かけるようになりました。例えばこちらのサイトとか↓。

特に表示領域の少ないタブレットやスマフォで活きてくるテクニックですね。実際に実装してみたいと思います。

まずはサンプルをご覧ください。

Contents

jQueryで下スクロールなのか上スクロールなのか判別してクラスを付与、削除する
- 最初にHTMLです。
- jQueryです。
CSSでアニメーションさせる
- CSSです。
応用編
- jQueryに追加します。
まとめ

jQueryで下スクロールなのか上スクロールなのか判別してクラスを付与、削除する

最初にHTMLです。

<header class="site-header flex flex--bet">
    <h1 class="site-logo">
        <img class="site-logo__img" src="images/logo.png" alt="logo">
    </h1>
    <nav class="gnav">
        <ul class="gnav__menu flex flex--bet">
            <li class="gnav__menu__item">
                <a class="gnav__menu__item__link" href="#sec1">SECTION1</a>
            </li>
            <li class="gnav__menu__item">
                <a class="gnav__menu__item__link" href="">SECTION2</a>
            </li>
            <li class="gnav__menu__item">
                <a class="gnav__menu__item__link" href="">SECTION3</a>
            </li>
        </ul>
    </nav>
</header>

この後のjQueryで「site-header」にスクロール方向に応じてクラスを付与、削除します。

jQueryです。

スクロール方向を判別するスクリプトを見ていきましょう。

var startPos = 0,winScrollTop = 0;
$(window).on('scroll',function(){
    winScrollTop = $(this).scrollTop();
    if (winScrollTop >= startPos) {
        $('.site-header').addClass('hide');
    } else {
        $('.site-header').removeClass('hide');
    }
    startPos = winScrollTop;
});

はじめに変数「startPos」と「winScrollTop」を定義します。
「startPos」＝直前までのスクロールの値
「winScrollTop」＝現在のスクロール値
となります。

そしてスクロールが発生する度に4行目「if (winScrollTop >= startPos) {」で
直前までのスクロール値より現在のスクロール値が増えているか判別します。

スクロール値が直前より増えている　＝　下方向スクロール
スクロール値が直前より減っている　＝　上方向スクロール
となります。

下方向スクロールの場合は「addClass('hide')」でクラスを付与し、
上方向スクロールの場合は「removeClass('hide')」でクラスを削除します。

スクリプトの最後9行目「startPos = winScrollTop」で「startPos」を最新のスクロール値に更新しています。

CSSでアニメーションさせる

CSSです。

.site-header{
    background: rgba(255,255,255,0.8);
    padding: 20px;
    position: fixed;
    top: 0;
    transition: .5s;
    width: 100%;
    z-index: 999;
}
 
.site-header.hide{
    transform: translateY(-100%);
}

ヘッダーのデザイン部分のCSSは割愛しております。

6行目でデフォルトの状態で「transition: .5s;」としています。

12行目「transform: translateY(-100%);」でクラスが付与された後は画面上の見えない位置に移動しています。たったこれだけです。簡単ですね。

応用編

これまでのものだとスクロールし始めたらすぐに上に消えてしまうので、少しスクロールしてから消えるようにします。

jQueryに追加します。

$(window).on('scroll',function(){
    winScrollTop = $(this).scrollTop();
    if (winScrollTop >= startPos) {
        if(winScrollTop >= 200){
            $('.site-header').addClass('hide');
        }
    } else {
        $('.site-header').removeClass('hide');
    }
    startPos = winScrollTop;
});

追加したのは4行目と6行目で囲われた「if(winScrollTop >= 200){」の判定のみです。

これで「下方向のスクロールかつ200px以上スクロールしている」場合からクラスが付与されるのでスクロールし始めてすぐ消えなくなります。