スクロールを監視してヘッダーバーを表示/非表示させるjQueryプラグイン「jquery.cb-slideheader.js」

前回は『jQuery animateでスクロールするとスライドして現れる「ヘッダーバー」を実装する方法』という記事を書きました。内容としては、スクロールに合わせてヘッダーバーを表示/非表示させる機能の実装方法となります。今回は、そこで紹介した実装方法を元に汎用的に使うためのjQueryプラグインを作ってみたので紹介させていただきます。使用頻度は高いと思いますので、ぜひ当記事をお読みの上お使いいただければと思っています。

jquery.cb-slideheader.js
jquery.cb-slideheader.js

jquery.cb-slideheader.js概要

「jquery.cb-slideheader.js」は、ページのスクロールに合わせてヘッダーバーをスライドさせて表示/非表示させる機能を実装するためのjQueryプラグインです。

ヘッダーバーを固定する実装は、もうすでに一般化して多くのサイトで取り入れられていますが、さらにそこからヘッダーバーに動きを持たせるという実装が最近ではよくみかけるようになってきました。以下に紹介するのが、まさにそうした実装を取り入れた今風のサイトとなっています。

プラグインのメソッド

jquery.cb-slideheader.jsでは、そうした実装を見据えて2つのメソッドを用意しました。この2つのメソッドはヘッダーバーに対して以下の通り処理を実行します。

  • .cbSlideDownHeader()メソッド: ページを下にスクロールすると非表示になっていたヘッダーバーを表示させるメソッド
  • .cbSlideUpHeader()メソッド: ページを下にスクロールすると表示されているヘッダーバーを非表示にするメソッド

サンプル

以下は当プラグインの基本的な機能を実装したサンプルとなります。まずはご確認ください。(ちなみに、こちらの記事のページにも実装しています。ページを下にスクロールするとヘッダーバーが隠れて、上にスクロールすると現れるのがわかると思います。)

それでは、さっそく実装方法と使い方について以下に説明していきます。

jquery.cb-slideheader.jsの実装方法

1. プラグインをダウンロードする

当プラグインはGitHubからダウンロードすることができます。

または、[git clone]コマンドでローカルにコピーしてもよいです。

$ git clone git@github.com:maechabin/jquery.cb-slideheader.js.git 任意のディレクトリ名

npm経由でのダウンロードも可能です。

$ npm install --save cbslideheader

使用するファイルは以下のcssファイルとjsファイルの2つとなります。

  • dist/cbslideheader.css
  • dist/jquery.cbslideheader.min.js

2. プラグイン & 外部ファイルを読み込む

次にダウンロードしたファイルとjQueryファイルを使用するページに読み込ませます。

<link rel="stylesheet" href="cbslideheader.css">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery.cbslideheader.min.js"></script>

当プラグインはCommonJSに対応しているので、require()メソッドで読み込めるようにもなっています。

3. ヘッダーバーを準備する

jQueryプラグインを適用するヘッダーバーを準備していきます。例として以下のようなものをとりあえず作っておきます。ルールとして、プラグインを適用したいヘッダーバーの要素に対して「cb-header」というclass名をつけます

<header class="cb-header header1">header1</header>

こちらも例となりますが、ヘッダーバーに対して以下のようなスタイルを適用させておきます。幅が100%、高さが56px、背景色が黒のヘッダーバーとなります。

header {
  background-color: #000;
  line-height: 56px;
  text-align: center;
  width: 100%;
  color: #fff;
}

4. CSSを指定する

ヘッダーバーに付与したclass属性「cb-header」に対して、以下を指定します。ページを読み込んだ初期表示でヘッダーバーを非表示にしておきたい場合はvisibility: hidden;を指定しておきます。

.cb-header {
  position: fixed;
  left: 0;
  /*
    ページを読み込んだ初期表示でヘッダーバーを
    非表示にしておきたい場合は以下を指定
  */
  visibility: hidden;
}

5. プラグインを実行する

準備したヘッダーバーに対して、プラグインのメソッドを(ヘッダーバーより下の位置で)実行させます。

<script>
$(".header1").cbSlideDownHeader();
</script>

上記を実装したものが以下のサンプルとなります。初期状態ではヘッダーバーは非表示となっていますが、画面をスクロールするとヘッダーバーがスライドして表示されるようになっています。

当プラグインには、もう一つ反対の動きをするメソッドがあります。こちらは初期状態では、ヘッダーバーは表示されていますが、スクロールするとスライドして隠れるようになっています。以下をヘッダーバーより下の位置で実行させます。

<script>
$(".header1").cbSlideUpHeader();
</script>

実装のサンプルは以下となります。

jquery.cb-slideheader.jsのオプション紹介

jquery.cb-slideheader.jsのオプションは以下の通りです。

ヘッダーバーの表示/非表示に関するオプション

slidePoint {Number}
ヘッダーバーが表示/非表示のトリガーとなるスクロールの位置を指定します。この値を境にヘッダバーが現れたり、隠れたりするようになります。0以上の数値(ただしページの高さより小さい値)で指定します。デフォルト値は0となっています。
headerClone {Boolean}
slideDownHeader()メソッドを適用させると、ヘッダーバーは初期状態では非表示となります。ただ初期状態でも表示させておきたいケースもあることでしょう。このオプションをtureにするとヘッダーバーを複製して、常に表示されるヘッダーバーを生成します。複製したヘッダーバーには“cb-header1”というclass名が付与されます。デフォルト値はfalseとなっています。
headroom {Boolean}
slideUpHeader()メソッド専用のオプションです。trueにした場合、ページを下にスクールするとヘッダバーが隠れ、上にスクロールすると現れるようになります。headroom.jsというプラグインと同じような動きを実現します。デフォルト値はfalseとなっています。(ちなみに、このページのヘッダーバーはこのオプションを使って実装しています。)

ヘッダーバーのスタイルに関するオプション

headerBarHeight {Number}
表示/非表示の対象となるヘッダーバーの高さを指定します。ここで指定した高さ分だけ隠れるようになっています。0以上の数値(単位はpx)で指定します。デフォルト値はヘッダーバーの高さthis.$element.height()となっています。
headerBarWidth {String}
表示/非表示の対象となるヘッダーバーの幅を指定します。デフォルト値は“100%”となっており、基本はこのままでよいと思いますが、念のため幅を変更できるようにしてあります。CSSのwidthプロパティに指定できる値で指定します。
zIndex {Number}
表示/非表示の対象となるヘッダーバーの重なり順を指定します。値が大きいほど上になります。CSSのz-indexプロパティに指定できる値で指定します。デフォルト値は0となっています。
boxShadow {String}
表示/非表示の対象となるヘッダーバーに影をつけます。CSSのbox-shadowプロパティに指定できる値で指定します。デフォルト値は“none”となっています。
opacity {Number or String}
表示/非表示の対象となるヘッダーバーの透明度を指定します。CSSのopacityプロパティに指定できる値で指定します。デフォルト値は1となっています。

ヘッダーバーのアニメーションに関するオプション

slideDownDuration {Number or String}
ヘッダーバーが現れるスピード(duration)を指定します。「”slow”」、「”normal”」、「”fast”」または数値(単位はミリ秒)で指定します。デフォルト値は“noraml”となっています。
slideUpDuration {Number or String}
ヘッダーバーが隠れるスピード(duration)を指定します。「”slow”」、「”normal”」、「”fast”」または数値(単位はミリ秒)で指定します。デフォルト値は“noraml”となっています。
slideDownEasing {String}
ヘッダーバーが現れる際のアニメーションの動作パターン(easing)を指定します。指定できる値は、「”swing”」か「”linear”」の2種類のみとなります。デフォルト値は“swing”となっています。
slideUpEasing {String}
ヘッダーバーが隠れる際のアニメーションの動作パターン(easing)を指定します。指定できる値は、「”swing”」か「”linear”」の2種類のみとなります。デフォルト値は“swing”となっています。

コールバック関数に関するオプション

slideDownCallback {Function}
ヘッダーバーが現れた後に実行されるコールバック関数を指定します。デフォルト値はfunction () {}となっています。
slideUpCallback {Function}
ヘッダーバーが隠れた後に実行されるコールバック関数を指定します。デフォルト値はfunction () {}となっています。

全画面表示に関するオプション

fullscreenView {Boolean}
後ほど使い方を説明しますが、ヘッダーバーともう一つの要素を利用して、当プラグインは全画面表示に対応する機能も備えています。こちらをtrueにすることで全画表示に対応するようになります。デフォルト値はfalseとなっています。
header2SelectorName {String}
上記のfullscreenViewをtrueにした場合、全画面表示に使われる要素のセレクター名を指定します。デフォルト値は.cb-header2となっています。

jquery.cb-slideheader.jsのちょっとした実装事例

上記で説明したオプションを組み合わせて使うと面白い実装ができたりします。いくつか紹介したいと思います。

ヘッダーバーを2つ用意し、cbSlideDownHeader()メソッドとcbSlideDownHeader()メソッドで相互に見え隠れさせる

以下のような機能を実装します。

スクロールに合わせて、一方は表示、もう一方は非表示、またはその逆のパターンとなるような実装となっています。

ヘッダーバーを2つ用意し、どちらにもclass名として「cb-header」を指定します。それに加えて「それぞれ異なるclass名」をつけます。

<header class="cb-header header1">header1</header>
<header class="cb-header header2">header2</header>
HTML

それぞれ異なるclass名に対して、一方には「.cbSlideDownHeader()」メソッド、もう一方には「cbSlideUpHeader()」メソッドを実行させるようにします。どちらが上になるかzIndexオプションを使って重なり順を指定します。

$(".header1").cbSlideDownHeader({
  zIndex: 1
});
$(".header2").cbSlideUpHeader({
  zIndex: 0
});
JavaScript

全画面表示(その1)

以下のような機能を実装します。

任意の要素を全画面表示させ、スクロールによりその要素が画面から隠れるタイミングでヘッダーバーが表示させるような実装となっています。

ヘッダーバーと全画面表示用の要素を用意し、class名として、ヘッダーバーには「cb-header」、全画面表示用の要素には「cb−header2」を指定します。

<header class="cb-header">header</header>
<div class="cb-header2"></div>
HTML

ヘッダーバーには「.cbSlideDownHeader()」メソッドを実行させるようにし、オプションとして「fullscreenView: true」を指定します。

$(".cb-header").cbSlideDownHeader({
    fullscreenView: true
});
JavaScript

ヘッダーバーを複製し、全画面表示(その2)

以下のような機能を実装します。

上記の全画面表示(その1)の発展形です。任意の要素で全画面表示させ、スクロールによりその要素が画面から隠れるタイミングでヘッダーバーが表示させるところまでは同じです。今回の実装では、ヘッダーバーを複製し初期状態で表示させるようにしています。またスクロールで表示させるときに影をつけ、透明化させています。

ヘッダーバーと全画面表示用の要素を用意し、class名として、ヘッダーバーには「cb-header」、全画面表示用の要素には「cb−header2」を指定します。

<header class="cb-header">header</header>
<div class="cb-header2"></div>
HTML

ヘッダーバーには「.cbSlideDownHeader()」メソッドを実行させるようにします。オプションとして、影付けと透明化には「boxShadow: “0 2px 2px #333″」「opacity: .7」、全画面表示には「fullscreenView: true」オプション、ヘッダーバーの複製には「headerClone: true」と指定して実装します。

$(".cb-header").cbSlideDownHeader({
  boxShadow: "0 2px 2px #333",
  opacity: .7,
  fullscreenView: true,
  headerClone: true
});
JavaScript

コールバック関数を指定

以下のような機能を実装します。

ヘッダーバーが表示された時と、非表示になった時にコールバック関数を実行するような実装になっています。

ヘッダーバーを用意し、「cb-header」とclass名をつけます。

<header class="cb-header">header</header>
HTML

ヘッダーバーには「.cbSlideDownHeader()」メソッドを実行させるようにし、非表示になった時のコールバック関数を「slideUpCallback」オプションに、表示された時に実行されるコールバック関数を「slideDownCallback」オプションに指定します。(今回の実装はアラートが表示されるだけです。)

$(".cb-header").cbSlideDownHeader({
  slideUpCallback: function () {
    alert("slideUp1");
  },
  slideDownCallback: function () {
    alert("slideDown1");
  }
});
JavaScript

ページを下にスクールすると隠れ、上にスクロールすると現れるヘッダーバー

以下のような機能を実装します。

表示/非表示のトリガーとなるスクロールの位置に関係なく、ページを下にスクロールすれば隠れ、上にスクロールするとあらわれるヘッダバーの実装となります。こちらのページにも実装しています。

ヘッダーバーを用意し、「cb-header」とclass名をつけます。

<header class="cb-header">header</header>
HTML

使用するメソッドは「.cbSlideUpHeader()」メソッドとなります。オプションとして「headroom: true」を指定します。

$(".cb-header").cbSlideUpHeader({
  headroom: true
});
JavaScript

さまざまな実装パターンを想定してオプションを用意しているので、オプションを駆使することでいろいろな実装ができるようになると思います。特にコールバック関数の使い方がポイントになってくると思っています。

まとめ

使用頻度はそれなりに高いかなと思って作ってみたので、ぜひ興味がありましたら、ダウンロードして使っていただけると嬉しいです。一応プラグインという形にしてみましたが、普通にスクロールに合わせてヘッダーバーの挙動をコントロールさせる機能を実装するのはそれほど難しくないと思います。前回の投稿では、その辺りの機能実装について詳しく書いているので、参考にしていただけたらと思います。

また、GitHubの方で当プラグインのソースコードを公開しているので、併せてご参照いただければよいかなと思います。

実装の甘い部分だったり、機能的に不十分だったり、まだまだ改善の余地はたくさんあると思うので、何かありましたらお知らせいただけると幸いです。

コメント一覧

  1. お世話になります。

    ヘッダー関連で検索していたらこちらにたどり着きました。

    探し求めていたような動作のjqueryがあったので使わせていただければと思います。

    一点、出来れば教えていただきたいのですが、ヘッダーの中にリストでメニューなどを入れていた場合にheaderCloneで複製したあとのそれらの中の文字色の変更などはできますでしょうか。

    いい考えが浮かばずスクロールしたらリストの中の文字にCSSを加えるようなjqueryを追加するしかないのかと考えていました。

    素人で申し訳ないですが教えていただければ幸いです。

    よろしくお願いします。

    野口  返信

    • 野口さま

      当プラグインを使って下さり、ありがとうございます。複製したヘッダーのclass名を削除する仕様になっていたので、今回複製したヘッダーには”cb-header1″というclass名を付与するようにしました。

      このclass名を元に複製したヘッダーのスタイルを変更していただければと思います。

      プラグインを更新したので、改めてダウンロードしてお使いください。

      ご不明な点があれば、再度おっしゃってください!また、その他にも何かご要望などありましたら、すぐに対応させていいただきますので、ご遠慮なくお申し付けください!

      今後ともよろしくお願いいたします。

      Takanori Maeda  返信

  2. マエダ様

    お世話になります。
    素早い対応の上、プラグインまで編集いただいてなんだか申し訳ないです。
    本当に助かりました!ありがとうございました!

    グラフィックデザインが専門で、フロントエンドはHTMLとCSSをちょっといじるくらいの勉強中の身なのでブログの内容がとても参考になりました。

    ブログの更新、楽しみにしております。

    野口  返信

    • 野口さま

      こちらこそ、なかなか自分だけでは気づかないことがあるので、ご連絡いただけてとても助かりました。ありがとうございます。

      引き続き、何かあればおっしゃっていただけると幸いです。

      ブログの方もフロントエンドの情報が中心となりますが、今後ともよろしくお願いいたします。

      Takanori Maeda  返信

  3. 使わせていただきました。
    最初、他の英語サイトのものを試したのですが、どうにもうまく行かず、
    マエダ様のプログラムはすぐに動きました。
    解説も丁寧でわかりやすかったです。
    本当にどうもありがとうございます。

    深澤  返信

    • 深澤さま

      コメントありがとうございます。それから、当プラグインをお使いくださり、ありがとうございます。

      > 解説も丁寧でわかりやすかったです。
      > 本当にどうもありがとうございます。

      そのように仰っていただけると大変嬉しいです。今後当プログインをお使いの中で何か不明点などございましたら、ご遠慮なく仰ってください。

      今後ともよろしくお願いいたします。

      Takanori Maeda  返信

  • 必須

コメント