固定ヘッダーを簡単に実装可能なJavaScript「On Scroll Header Effects」

モモコ

2013.10.10

こんにちは、デザイナーのモモコです。
新オフィスに引っ越してから、いろいろな人のお手製ご飯が食べられて嬉しい今日この頃です。
今回は、セクションごとにスタイリッシュな切り替えができる固定ヘッダーを簡単に設置できるJavaScript「On Scroll Header Effects」を紹介します。

公式ページはこちら：
https://tympanus.net/codrops/2013/07/16/on-scroll-header-effects/

デモ

abcd

まずは、下記リンクからデモをご覧ください。

https://211.125.65.24/demo/2013/10/effect/

※現在はサービスを終了しています。

実装手順

使用するのは「jQquery」と「waypoints.js」の2つです。
まずはHTMLとCSSを用意します。

CSSの読み込み

<link rel="stylesheet" type="text/css" href="css/component.css" />

ヘッダー部分

</pre>
<header id="ha-header" class="ha-header ha-header-large">
<div class="ha-header-perspective">
<div class="ha-header-front"><!-- デフォルト表示 -->
<h1>DEMO PAGE</h1>
<nav><a href="#">Back to home</a></nav></div>
<div class="ha-header-bottom"><!-- サブメニュー -->
<nav><a>Dubhe</a>
<a>Merak</a>
<a>Phecda</a>
<a>Megrez</a>
<a>Alioth</a>
<a>Mizar</a>
<a>Benetnasch</a>
<a>Alcor</a></nav></div>
</div>
</header>
<pre>

トリガー部分

</pre>
<section class="ha-waypoint" data-animate-down="ha-header-small" data-animate-up="ha-header-large">
If there exist savages so barbarous as never to think of the inherited character of the offspring of their domestic animals, yet any one animal particularly useful to them, for any special purpose, would be carefully preserved during famines and other accidents, to which savages are so liable, and such choice animals would thus generally leave more offspring than the inferior ones; </section>
<pre>

data-animate-downには下スクロールを行った場合のエフェクト、data-animate-upには上スクロールを行った場合のエフェクトを指定します。
用意されているエフェクトは全部で12種類あります。

エフェクト一覧

ha-header-large（拡大表示）
ha-header-small（縮小表示）
ha-header-show（表示）
ha-header-hide（非表示）
ha-header-subshow（サブメニューを表示）
ha-header-shrink（更に縮小表示）
ha-header-rotate（サブメニューを回転して表示）
ha-header-rotateBack（逆回転して表示）
ha-header-color（背景色を付ける）
ha-header-box（隅に畳んで表示）
ha-header-fullscreen（フルスクリーンで表示）
ha-header-subfullscreen（フルスクリーンの下半分にサブメニューを表示）

続いてスクリプトを記述していきます。

JavaScript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script>// <![CDATA[
var $head = $( '#ha-header' ); //headerのIDを記述
     $( '.ha-waypoint' ).each( function(i) {　//トリガーになる要素のClassを記述
          var $el = $( this ),
          animClassDown = $el.data( 'animateDown' ),
          animClassUp = $el.data( 'animateUp' );

          $el.waypoint( function( direction ) {
               if( direction === 'down' && animClassDown ) {
               $head.attr('class', 'ha-header ' + animClassDown);//下スクロールだった場合ヘッダーにdata-animate-downのクラスを追加
               }
               else{
               $head.attr('class', 'ha-header ' + animClassUp); //ヘッダーにdata-animate-upのクラスを追加
               }
          }, { offset: '100px' } ); //要素の100px上を通過したら切り替え開始
     } );
// ]]></script>

offsetをマイナス値にする事によって要素を〇〇px通過したら切り替え、ということも可能です。
Codropsさんのデモの中ではelseにupだった場合の条件式が書かれていましたが、上スクロールでも切り替えたかったので、一部の記述を削除しています。
ここを書き換えれば記述そのままで動くよ！という箇所があれば是非ご教示いただきたいです・・・！