JavaScriptテックラボ

スクロールに合わせてヘッダーを変化させる

2015年12月25日

概要

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

デモ

ダウンロード ※ファイルの場所は上記サイトの 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>

Comment

コメントを残す

メールアドレスが公開されることはありません。

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。