【jQuery】スクロールに合わせてヘッダーサイズを変化させる

JavaScript

<script>” title=”<script>

<script>

今回はスクロールに合わせてヘッダーサイズを変化させる実装を紹介します。

前回はヘッダーを単純に固定させる方法を紹介しました。

CSSでヘッダー（ナビゲーション）を上部に固定させる方法

ヘッダーを固定で表示させたい時、高さが大きいと見える範囲が狭まりユーザーに不便な思いをさせてしまします。

そんな時は、スクロールに合わせてヘッダーを少し小さくしてあげると見える範囲が少し広がり、ユーザーに親切です。

早速デモサイトを見てみましょう。

デモサイト

【スクロールに合わせてヘッダーサイズを変化】HTML編

<header>
      <h1><img src="logo.png" alt="英語好きフリーランスの旅日記"></h1>
      <nav>
        <ul>
          <li><a href="#">ホーム</a></li>
          <li><a href="#">アバウト</a></li>
          <li><a href="#">サービス</a></li>
          <li><a href="#">会社概要</a></li>
          <li><a href="#">お問い合わせ</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <div class="content"><img src="content.jpg"></div>
    </main>

【スクロールに合わせてヘッダーサイズを変化】CSS編

*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}

li{
  list-style: none;
}

img{
  display: block;
}

header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 200px;
    position: fixed;
    top: 0;
    width: 100%;
    background: #fbf4ec;
    transition: .3s;
}

.is-animation{
  height: 100px;
}


ul{
  display: flex;
  justify-content: space-between;
}

ul li{
  width: 120px;
  text-align: center;
}

ul li a{
  display: block;
  text-decoration: none;
  color: #333;
}

main{
  padding-top: 200px;
}

.content img{
  width: 100%;
}

解説です。

header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 200px;
    position: fixed;
    top: 0;
    width: 100%;
    background: #fbf4ec;
    transition: .3s;
}

position:fixedでヘッダーを固定します。

main{
  padding-top: 200px;
}

position:fixedで直下の要素が回り込んできてしまうので、padding-topで余白をとります。

.is-animation{
  height: 100px;
}

スクロールした時に追加してあげるclassです。

【スクロールに合わせてヘッダーサイズを変化】jQuery編

$(function() {
      var $win = $(window),
      $header = $('header'),
      animationClass = 'is-animation';

    $win.on('load scroll', function() {
      var value = $(this).scrollTop();
      if ( value > 100 ) {
        $header.addClass('is-animation');
      } else {
        $header.removeClass('is-animation');
      }
      });
    });

解説です。

if ( value > 100 ) {
      $header.addClass(animationClass);
    } else {
      $header.removeClass(animationClass);
    }

スクロール量が指定した数値以上（今回は100）になったらヘッダーにclassを付与します。

デモサイト