お気軽にご相談ください
050-8885-7511
全国対応・平日10時〜18時

下にスクロールするとヘッダーが消えて上にスクロールするとヘッダーが表示するアニメーションの実装方法

代表取締役

児島 大

下にスクロールするとヘッダーが消えて上にスクロールするとヘッダーが表示するアニメーションを実装する方法です。
初心者のかたが読んでもわかるようにできる限り細分化して解説していますが、うまく実装できなければコメントください。

どんな動作か確認したいかたは、まずはデモをご覧ください。

コピペだけで実装

HTML

<header>ヘッダー</header>
<main>コンテンツ</main>
<footer>フッター</footer>

CSS

body {
	margin: 0;
}
header {
	position: fixed;
	padding: 3em 0;
	width: 100%;
	text-align: center;
	color: #fff;
	background-color: #000;
	z-index: 2;
	transition: .3s;
}
main {
	height: 2000px;
	text-align: center;
	background-color: #fff;
}
footer {
	padding: 3em 0;
	text-align: center;
	color: #fff;
	background-color: #000;
}

JavaScript

$(function() {
	var headerHeight = $('header').outerHeight(),
		startPos = 0;
	$(window).on('load scroll', function() {
		var scrollPos = $(this).scrollTop();
		if ( scrollPos > startPos && scrollPos > headerHeight ) {
			$('header').css('top', '-' + headerHeight + 'px');
		} else {
			$('header').css('top', '0');
		}
		startPos = scrollPos;
	});
});	

誰でもわかる詳しい解説

JavaScript

まず、JavaScriptの2行目-3行目では、変数の宣言と初期化をしています。
2行目は、jQueryの.outerHeight()をつかって、header要素の高さを取得して、headerHeightに代入しています。
3行目は、startPosに0を代入しています。

var	headerHeight = $('header').outerHeight(),
	startPos = 0;

4行目は、ページ読み込み完了時とスクロールしたときに動かすというように書いています。

$(window).on('load scroll', function() {

5行目は、ブラウザの画面をスクロールした時の位置(スクロール量)を取得して、scrollPosに代入しています。

var scrollPos = $(this).scrollTop();

6行目は、「3行目でstartPosに代入した0と5行目で取得したスクロール位置とを比較してスクロール位置が大きければ且つ2行目で取得したheader要素の高さと比較して5行目で取得したスクロール位置が大きければ」という条件文です。

if ( scrollPos > startPos && scrollPos > headerHeight ) {

上記条件に一致する場合の動作として、header要素にCSSを付与するというように書いています。

$('header').css('top', '-' + headerHeight + 'px');

8行目は、「上記条件以外の場合」と書いて、9行目で、header要素にCSSでtop:0;を付与するというように書いています。

$('header').css('top', '0');

最後に11行目で、0が代入されているstartPosに、5行目で取得したスクロール位置を上書きするかたちで代入するというようになります。

startPos = scrollPos;
お問い合わせ・ご相談

お見積りのご依頼やそのほかのお仕事のご相談などはお問い合わせフォームからお問い合わせください。

お問い合わせする
会社案内ダウンロード

弊社の会社案内をPDFでご用意しております。社内での検討時などにご利用ください。

資料準備中…

お電話でのお問い合わせはこちら

  • ※電話番号はおかけ間違いのないようご注意ください。
  • ※セールス目的のお電話はお断りしております。