【jQuery】スクロールするとスライドで表示するヘッダーのアニメーションを実装してみる

最近は、jQueryを触る機会もだいぶ減ってきました（笑）そんな中久々にjQueryでスクロールするとスライドして現れるヘッダーのアニメーションを作ることになったのでメモします。
サンプルは下記に作成しました。

上記のサンプルを見ていただくを分かると思いますが、スクロールしていくと背景色が赤いヘッダーがアニメーションしながらスライドダウンして表示されるのが分かると思います。今回はこれを実装していこうと思います。

htmlでヘッダーを準備をする

まず、スライドでアニメーションさせる為のhtmlのソースを準備します。

ここは特に説明するほど難しくないのですが、まずアニメーションさせるヘッダーを「sub_header」としてその下に通常の「header」を用意しました。
後は、スクロールさせるためにダミーとなる高さをもったdivタグを用意しています。

  

	
ここはサブヘッダー
    

      
HOME
      
ABOUT
      
NEWS
      
LINK
    
  





ここがヘッダー領域
スクロールしてヘッダー領域が隠れるとサブヘッダーが表示されます。




スクロール　↓
スクロール　↓
スクロール　↓
スクロール　↓
スクロール　↓

アニメーションさせるサブヘッダーをCSSで設定する

今度は、アニメーションさせるサブヘッダーをCSSで設定していくのですが、今回はスライドでサブヘッダーが表示された後はそのままサブヘッダーをウィンドウの上部に固定させたいと思いますので、positionのプロパティでfixedを指定してヘッダーを固定させます。

今回はウィンドウの上に固定させるのでtopとleftのプロパティを0に設定します。

#sub_header{
	
	position:fixed; /* ヘッダーバーを固定 */
	top: 0; /* 上から0の位置に固定 */
	left: 0; /* 左から0の位置に固定 */

}

CSSに関しては後は自由に設定してもらって構いません。サンプルではナビゲーションっぽくしてます。

jQueryで実装する

アニメーションさせるにはjQueryを利用するのでjQueryをダウンロードするなりしてリンクしておいてください。

必要な情報を変数に保存する

まずは今回jQueryでアニメーションさせるサブヘッダーのオブジェクトや通常のヘッダーの高さ、その他アニメーションさせるスピードなど必要な情報を変数に代入しておきます。
下記のコードにコメントを書いています。

ポイントとしては、jQueryでアニメーションさせるタイミングを通常のヘッダーがスクロールで隠れたタイミングにしたいので、ヘッダーの高さを取得するのですが、ヘッダーなどはpaddingなどが含まれている事もおおいので今回はouterHeight()のメソッドを利用してpaddingを含んだ高さを取得しています。

	
	var sub_h = $("#sub_header"); //サブヘッダー
    var sh_h = sub_h.height(); //サブヘッダーの高さ
    var navTop = $("#header").outerHeight(); //ヘッダーの高さ（余白を含む）を取得しておく
    var speed = 400;

アニメーションさせるサブヘッダーの初期位置を設定

ページが表示された時に出ているのはおかしいので初期の段階ではウィンドウの上部に隠れている必要があるので、jQueryでサブヘッダーの位置をサブヘッダーの高さ分マイナスの位置に指定する必要があります。

	
	//サブヘッダーの初期位置
    sub_h.css({
        "top": -sh_h + "px"
    });

上記のように設定しておけば、ページが読み込まれた段階ではサブヘッダーは隠れているはずです。

スクロールした時のページ内のスクロール量(現在の位置)を取得する

jQueryでウィンドウのスクロール量（現在の位置）を取得するには、windowオブジェクトにscroll()イベントを設定してスクロールしているか監視します。

scroll()イベントが動作している時はスクロールしているということになるので、そこでscrollTop()でスクロールの移動量を変数winTopに代入します。

	
	//windowのスクロールイベント
    $(window).scroll(function(){
	
	//ウィンドウのスクロール量を取得
	var winTop = $(this).scrollTop();
	
	}

jQueryのanimate()でサブヘッダー表示・非表示させるアニメーション

サブヘッダーをjQueryのanimate()でアニメーションさせるには、いつ表示・非表示させるのか？という基準となる値が必要になりますが、基準値は通常のヘッダーの高さとなる変数navTopとしています。

理由は通常のヘッダーがスクロールによってウィンドウ上から隠れたタイミングでサブヘッダーをスライドダウンで表示させるアニメーションを実行させたいので「スクロールの移動量が通常のヘッダーの高さを超えた場合」を条件分岐として、表示・非表示を切り替える為です。

	
//サブヘッダーのアニメーション
if (winTop > navTop) {

    // サブヘッダーを表示させるアニメーション
    $("#sub_header").stop().animate({
        top: 0
        }, {
            duration: speed,
            queue: false
           });
	   // scrollTop()が0の場合
        } else {

	// サブヘッダーを非表示させるアニメーション
    $("#sub_header").stop().animate({
        top: -sh_h
        }, {
            duration: speed,
            queue: false
     });
}

サブヘッダーを表示させるアニメーション

条件が成立したら、ページを読みこんだ時点ではサブヘッダーのtopのプロパティにはマイナスの値が設定されているので、topの位置をanimate()で0にすることでウィンドウの上部にスライドダウンして表示されます。
また、サブヘッダーのpositionにはfixedが指定されているので表示されている間はウィンドウ上部に固定されて表示されます。

サブヘッダーを非表示させるアニメーション

表示されたサブヘッダーを非表示にするには、「スクロールの移動量が通常のヘッダーの高さを下回った場合」になるので通常のヘッダーがウィンドウ上に表示されてる事になります。
そのタイミングでサブヘッダーの位置をanimate()でサブヘッダーの高さ分（変数：sh_h）マイナス方向にアニメーションさせます。そうすることでサブヘッダーがスライドアップされてウィンドウ上部に隠れます。

animate()を使う場合の注意点

今回の記事に限ったことではないのですが、animate()を実装した場合にはanimate()を実行する直前にstop()を実行してください。

これは、animate()はイベントが発生した数だけ実行されるようになっているので、下手すると通常のヘッダーがウィンドウ上から消える境目で何度もスクロールダウンとスクロールアップを繰り返すとそれだけアニメーションの処理が溜まっていきます。
するとスクロールをしていない時も溜まっていたアニメーションが実行されてるので、スライドダウンとスライドアップするアニメーションが繰り返される事になりかねませんので注意してください。

まとめ

以上で、jQueryでスクロールするとスライドで表示するヘッダーのアニメーションの実装の説明は終わりです。

ここ最近では、通常のヘッダーのほかにサブヘッダーを用意し最低限のナビゲーションを設置してユーザビリティを確保するサイトも増えてると思います。こちらのAdverTimes（アドタイ）| 広告界のニュース＆情報ポータルサイトのサイトもその一つですのでぜひ参考にしてみてください。