前回は『jQuery animateでスクロールするとスライドして現れる「ヘッダーバー」を実装する方法』という記事を書きました。内容としては、スクロールに合わせてヘッダーバーを表示/非表示させる機能の実装方法となります。今回は、そこで紹介した実装方法を元に汎用的に使うためのjQueryプラグインを作ってみたので紹介させていただきます。使用頻度は高いと思いますので、ぜひ当記事をお読みの上お使いいただければと思っています。
目次
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>
それぞれ異なるclass名に対して、一方には「.cbSlideDownHeader()」メソッド、もう一方には「cbSlideUpHeader()」メソッドを実行させるようにします。どちらが上になるかzIndexオプションを使って重なり順を指定します。
$(".header1").cbSlideDownHeader({
zIndex: 1
});
$(".header2").cbSlideUpHeader({
zIndex: 0
});
全画面表示（その1）
以下のような機能を実装します。
任意の要素を全画面表示させ、スクロールによりその要素が画面から隠れるタイミングでヘッダーバーが表示させるような実装となっています。
ヘッダーバーと全画面表示用の要素を用意し、class名として、ヘッダーバーには「cb-header」、全画面表示用の要素には「cb−header2」を指定します。
<header class="cb-header">header</header>
<div class="cb-header2"></div>
ヘッダーバーには「.cbSlideDownHeader()」メソッドを実行させるようにし、オプションとして「fullscreenView: true」を指定します。
$(".cb-header").cbSlideDownHeader({
fullscreenView: true
});
ヘッダーバーを複製し、全画面表示（その2）
以下のような機能を実装します。
上記の全画面表示（その1）の発展形です。任意の要素で全画面表示させ、スクロールによりその要素が画面から隠れるタイミングでヘッダーバーが表示させるところまでは同じです。今回の実装では、ヘッダーバーを複製し初期状態で表示させるようにしています。またスクロールで表示させるときに影をつけ、透明化させています。
ヘッダーバーと全画面表示用の要素を用意し、class名として、ヘッダーバーには「cb-header」、全画面表示用の要素には「cb−header2」を指定します。
<header class="cb-header">header</header>
<div class="cb-header2"></div>
ヘッダーバーには「.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
});
コールバック関数を指定
以下のような機能を実装します。
ヘッダーバーが表示された時と、非表示になった時にコールバック関数を実行するような実装になっています。
ヘッダーバーを用意し、「cb-header」とclass名をつけます。
<header class="cb-header">header</header>ヘッダーバーには「.cbSlideDownHeader()」メソッドを実行させるようにし、非表示になった時のコールバック関数を「slideUpCallback」オプションに、表示された時に実行されるコールバック関数を「slideDownCallback」オプションに指定します。（今回の実装はアラートが表示されるだけです。）
$(".cb-header").cbSlideDownHeader({
slideUpCallback: function () {
alert("slideUp1");
},
slideDownCallback: function () {
alert("slideDown1");
}
});
ページを下にスクールすると隠れ、上にスクロールすると現れるヘッダーバー
以下のような機能を実装します。
表示/非表示のトリガーとなるスクロールの位置に関係なく、ページを下にスクロールすれば隠れ、上にスクロールするとあらわれるヘッダバーの実装となります。こちらのページにも実装しています。
ヘッダーバーを用意し、「cb-header」とclass名をつけます。
<header class="cb-header">header</header>使用するメソッドは「.cbSlideUpHeader()」メソッドとなります。オプションとして「headroom: true」を指定します。
$(".cb-header").cbSlideUpHeader({
headroom: true
});
さまざまな実装パターンを想定してオプションを用意しているので、オプションを駆使することでいろいろな実装ができるようになると思います。特にコールバック関数の使い方がポイントになってくると思っています。
まとめ
使用頻度はそれなりに高いかなと思って作ってみたので、ぜひ興味がありましたら、ダウンロードして使っていただけると嬉しいです。一応プラグインという形にしてみましたが、普通にスクロールに合わせてヘッダーバーの挙動をコントロールさせる機能を実装するのはそれほど難しくないと思います。前回の投稿では、その辺りの機能実装について詳しく書いているので、参考にしていただけたらと思います。
また、GitHubの方で当プラグインのソースコードを公開しているので、併せてご参照いただければよいかなと思います。
実装の甘い部分だったり、機能的に不十分だったり、まだまだ改善の余地はたくさんあると思うので、何かありましたらお知らせいただけると幸いです。
コメント