copy_people copy_things copy_matter ttl_topics ico_blank ico_facebook ico_twitter ico_hatebu ico_index

2021/01/19

lodash.jsを使って、下スクロールで出現して上スクロールで隠れるヘッダーを実装する

  • JavaScript
  • js
  • Lodash

INDEX

    こんにちは、お久しぶりのtabataです。
    今回は表題にもあるように、下スクロールで出現して上スクロールで隠れるヘッダーを実装していきます!

    使用するライブラリ

    lodash

    CDNから読み込むか、ダウンロードして読み込んでください。

    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.20/lodash.min.js"></script>

    DEMO

    こちらが作成したDEMOです。
    まずは動きの参考にご確認くさだい。

    実際に書いたコード

    jsの説明は後述します!

    HTML

    <header id="header" class="l-header">
        <nav class="l-gnav">
            <ul class="l-gnav__list">
                <li class="l-gnav__item"><a class="l-gnav__link" href="/">メッセージ</a></li>
                <li class="l-gnav__item"><a class="l-gnav__link" href="/">会社概要</a></li>
                <li class="l-gnav__item"><a class="l-gnav__link" href="/">ニュース</a></li>
                <li class="l-gnav__item"><a class="l-gnav__link" href="/">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>

    CSS

    .l-header {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        background-color: #fff;
        border-bottom: 1px solid #999;
        transition: all 0.5s ease;
        z-index: 100;
    }
    
    .l-header.is-hide {
        transform: translateY(-100%);
    }
    
    .l-gnav {
        padding: 20px;
    }
    
    .l-gnav__list {
        list-style: none;
        display: flex;
        justify-content: flex-end;
    }
    
    .l-gnav__item + .l-gnav__item {
        margin-left: 20px;
    }
    
    .l-gnav__link {
        color: #000;
        padding: 10px 5px;
        text-decoration: none;
        display: inline-block;
    }

    JS

    const header = document.getElementById('header');
    const headerH = 81; // headerの高さ
    let startPos = 0; // 開始位置
    
    const headerFnc = () => {
        let currentPos = document.documentElement.scrollTop;
        if (currentPos > startPos && currentPos > headerH) { // 下スクロールしているとき
            header.classList.add('is-hide');
        } else { // 上スクロールしているとき
            header.classList.remove('is-hide');
        }
        startPos = currentPos;
    }
    
    window.addEventListener('scroll', _.throttle(headerFnc, 350)); // 0.35秒ごとに呼ばれる

    JSの説明

    まずはスクロールしている方向を検知します。
    下スクロール時:ヘッダーに is-hide クラスを付与し、cssで transform: translateY(-100%); を指定します。(画面の外に隠れる)
    上スクロール時:ヘッダーから is-hide クラスを削除し、ヘッダーを表示します。

    const headerFnc = () => {
        let currentPos = document.documentElement.scrollTop;
        if (currentPos > startPos && currentPos > headerH) { // 下スクロールしているとき
            header.classList.add('is-hide');
        } else { // 上スクロールしているとき
            header.classList.remove('is-hide');
        }
        startPos = currentPos;
    }

    次に、lodash の _.throttle を使用して、一定時間ごとにしか実行されないようにします。
    通常のスクロールイベントではスクロールするたびに関数を呼び出してしまうため、とても負荷がかかります。_.throttle は、連続する呼び出しを無視して、必ず指定した時間だけ待ってから再度実行してくれるので負荷対策になります。
    指定の仕方は下記です。
    _.throttle(関数, 時間)

    window.addEventListener('scroll', _.throttle(headerFnc, 350)); // .35秒ごとに呼ばれる

    lodashとは

    lodash
    便利な関数をまとめて提供しているライブラリです。

    参考記事

    過去記事

    まとめ

    意外と簡単に実装できましたね!
    このヘッダーの動きはわりと頻繁に見かけるので、気になった方はぜひ使ってみてください!
    今回はこの辺で!おつかれさまでした^^

    参考記事

    CONTACT

    お仕事のご相談や、弊社についてのご質問や
    ご要望など、お気軽にお問い合わせください。

    View