概要

ヘッダを上部に固定しつつ、スクロールに合わせて拡大・縮小させる方法を紹介します。

デモ

ダウンロード
※ファイルの場所は上記サイトの resize-header-on-scroll フォルダです。

HTMLマークアップはヘッダー部のHEADER要素とH1要素、コンテンツ部のMAIN要素のみです。

HTML

<header>
	<h1 id="site-logo">smart</h1>
</header>

<main id="main">
</main>

スクロールの位置によるヘッダーの拡大・縮小の仕掛けは簡単で、スクロール位置によってHEADER要素に拡大・縮小用のクラスを追加・削除します。
あとはCSSのアニメーションをHEADER要素に付けてあげるだけです。

スクロール位置の取得は scrollTop() を使います。

$(window).scrollTop()

CSSはHEADER要素、H1要素、MAIN要素に必要最低限の設定をしています。
HEADER要素は position: fixed で位置を固定し、HEDER要素とH1要素ともに transition で拡大・縮小のアニメーションを設定しています。

CSS

/*#########################################################

レイアウト

#########################################################*/
/* ヘッダ */
header {
  width: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: black;
  text-align: center;
  -moz-transition: height 0.3s;
  -o-transition: height 0.3s;
  -webkit-transition: height 0.3s;
  transition: height 0.3s;
}
/* サイトロゴ */
header h1#site-logo {
  line-height: 2;
  font-family: "Limelight", cursive;
  font-size: 6rem;
  color: white;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

/* 縮小時のサイトロゴ */
header.smaller h1#site-logo {
  font-size: 3rem;
}

/* メインカラム */
#main {
  background-color: white;
  height: 20000px;
}

ここで注目したいのは縮小時のサイトロゴ設定です。
smallerクラスが着いた際、通常時よりもフォントサイズを小さくしています。

/* 縮小時のサイトロゴ */
header.smaller h1#site-logo {
  font-size: 3rem;
}

これで準備が整いました。
あとはJavaScriptで smaller クラスをスクロール位置によってつけたり削除したりといった処理を書くだけです。

JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
function init() {
	// スクロールして何ピクセルでアニメーションさせるか
	var px_change	= 300;

	// スクロールのイベントハンドラを登録
	window.addEventListener('scroll', function(e){
		// 変化するポイントまでスクロールしたらクラスを追加
		if ( $(window).scrollTop() > px_change ) {
			$("header").addClass("smaller");

		// 変化するポイント以前であればクラスを削除
		} else if ( $("header").hasClass("smaller") ) {
			$("header").removeClass("smaller");
		}
	});
}
window.onload = init();
</script>