【JavaScript】下にスクロールしたら消えて上にスクロールしたらheaderが表示される実装

JavaScript

今回は、「下にスクロールしたら消えて上にスクロールしたらheaderが表示される実装」を紹介します。

JavaScript】下にスクロールしたら消えて上にスクロールしたらheaderが表示される実装

完成形はこちら。

See the Pen
Untitled
by ゆーじろー (@yuji64)
on CodePen.

上にスクロールしたらheaderが表示されることが分かるでしょう。

HTML

<header class="header">
    <div class="header__inner">
      <div class="header__logo">
        <h1>headerです</h1>
      </div>
    </div>
  </header>

  <div class="main-view"></div>

  <div class="boxs">
    <div class="box">
      <h2>ボックス1です。</h2>
    </div>
    <div class="box">
      <h2>ボックス2です。</h2>
    </div>
    <div class="box">
      <h2>ボックス3です。</h2>
    </div>
  </div>

headerとmain-view、そして下にスクロールできるようにboxを用意しました。

CSS

.header {
    background: rgba(158,134,134,0.7);
    padding: 20px;
    position: fixed;
    top: 0;
    transition: .5s;
    width: 100%;
    z-index: 999;
    &__inner {
        display: flex;
        align-items: center;
        max-width: 1000px;
        margin: 0 auto;
        justify-content: center;
    }
    &__logo {
        h1 {
            font-size: 1.6rem;
        }
    }
}
.header.hide {
    transform: translateY(-100%);
}

.main-view {
    background-color: sienna;
    height: 500px;
}

.boxs {
    max-width: 1000px;
    margin: 0 auto;
    padding: 100px 20px;
    .box {
        height: 500px;
        background-color: skyblue;
        text-align: center;
        line-height: 500px;
        font-size: 1.6rem;
        margin-bottom: 80px;
    }
}

今回はscssを使ってCSSコードを書きました。

headerはhideクラスがついたらブラウザから消えるようにします。

JavaScript

jQueryを使うので、以下のCDNをまずbodyの閉じタグ直前に書きましょう。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

そしてコードはこちら。

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

下にスクロールしたらheaderが消え、上にスクロールしたらhideクラスが取れてheaderがブラウザに表示されるようにしました。

まとめ

以上が、「下にスクロールしたら消えて上にスクロールしたらheaderが表示される実装」でした。

コピペでも使える実装なので、是非参考にしてみてください!