ブログ

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

こんにちは、お久しぶりの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
便利な関数をまとめて提供しているライブラリです。

参考記事

過去記事

まとめ

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

参考記事