スクロールで高さが変わる上部固定メニューを作る

jQueryプラグインでも色々とありますが
プラグインを使わなくても簡単に設置出来るのでご紹介

See the Pen resize fixed header by aplicot (@aplicot) on CodePen.dark

jQueryは必要なので読み込んでおいてください。

基本的にはスクロールした時にメニュー部分のブロックに対してCSSクラスを追加するという考え方です。

<div id="header">
  <ul>
    <li>menu1</li>
    <li>menu2</li>
    <li>menu3</li>
  </ul>
</div>
<div id="contents">contents</div>
<div id="footer">footer</div>

ヘッダー・コンテンツ・フッターというよくある構成ですが、この時点でヘッダーには初期の表示状態のCSSを与えます。
ヘッダー固定なので、positionはfixedで。
ここではheaderというidで設定してみます。

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  z-index: 1;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

次にスクロールした際の表示をthinというクラス名でCSSに追記します。
このthinクラスは初期状態のHTML上ではヘッダー部に割り当てません。

#header.thin {
  width: 100%;
  height: 60px;
}

このCSSクラスはJavascriptを使って、トップからのスクロール量によってメニューブロックに対して追加したり外したりという処理を行います。

$(function() {
  var dist = 50;
  $(window).scroll(function() {
    if ($(window).scrollTop() > dist) {
      $('#header').addClass('thin');
    } else {
      $('#header').removeClass('thin');
    }
  });
});