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

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

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

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

基本的には、

スクロールしたらメニュー部にCSSクラスを追加する

という考え方です。

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

<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;
}

#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;

}

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

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

#header.thin {

width: 100%;

height: 60px;

}

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

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

$(function() {

var dist = 50;

$(window).scroll(function() {

if ($(window).scrollTop() > dist) {

$('#header').addClass('thin');

} else {

$('#header').removeClass('thin');

}

});

どれくらいスクロールした時に高さが変化するかの設定は

var dist = 50;

1	var dist = 50;

この50という部分を変更して下さい。

CSSでtransitionを与えているのは
スクロールした時にいきなり高さが変化するのではなく
スムーズに変化するように見せるためですね。

実際にはメニューリンク部分やタイトルのマージンなども合わせて
thinクラスで設定が必要です。

もっとリッチな動きが好みの場合はプラグインを使うほうが楽ですが、
数行追加するだけで実現出来るのでお試しください。