ステップ3 JavaScriptコードを記述する
以下は、サンプルのJavaScriptコードです（抜粋）。非常にコンパクトなので、JavaScriptに不慣れな方でもご理解いただけると思います。
// (1) 画面の読み込みが完了すると呼び出される
$(function() {
// 情報バーが隠れているかどうか
var infobarHidden = true;
// (2) 情報バーのjQueryオブジェクト
var infobar = $('#infobar');
// (3) 画面がスクロールすると呼び出される
$(document).scroll(function(e) {
// (4) スクロール位置を取得
var scrollBottom = getScrollBottom();
// (5) 画面最下部から200ピクセル以内だったら
// 情報バーを表示する
if (scrollBottom < 200) {
if (infobarHidden) {
infobarHidden = false;
// (6) 情報バーを表示
infobar.css('right', 0);
}
} else if (!infobarHidden) {
infobarHidden = true;
// (7) 情報バーを画面の右に隠す
infobar.css('right', -infobar.outerWidth());
}
});
...
});
ポイントをみていきましょう。
- 「$(function() { ... })」のように、$()に関数を与えると、画面の読み込みが完了してから実行する処理を記述できます。この機能については次回さらに詳しく説明しますので、ここでは「この関数の処理は、画面の読み込みが終わった後に実行される」と理解しておくだけで問題ありません。
- CSSセレクタでid属性を指定して（'#infobar'）、情報バーのDOM要素をjQueryオブジェクトとして取得し、それを変数infobarに格納しています。
-
画面がスクロールすると呼び出される処理を定義しています。
$(document).scroll(function() { ... スクロール時に呼び出される処理 ... }); -
現在のスクロール位置が、画面最下部からどれくらい離れているかをピクセル単位で取得しています。この値を取得するために使用しているgetScrollBottom()関数は筆者が自作した関数で、ブラウザごとの差異を考慮しつつ、非標準のAPIを使用しているため、多少わかりにくいコードになっています。以下にコードを掲載しますが、完全に理解する必要はありません。
function getScrollBottom() { // スクロールバーの上端のY座標 var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; // スクロール可能な範囲も含めた全体の高さ var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; // ユーザに表示されている領域の高さ var clientHeight = document.documentElement.clientHeight || document.body.clientHeight; // WebKit系のブラウザは、scrollHeightとclientHeightが同じ値になるため、 // window.innerHeightを代わりに参照する if(scrollHeight === clientHeight) { clientHeight = window.innerHeight; //for webkit } // 以下の計算式で、残りのスクロール範囲を取得できる return scrollHeight - scrollTop - clientHeight; } -
スクロール位置が画面最下部から200ピクセル以上離れているかどうかで、処理を切り替えます。ここで使用している条件分岐の構造は以下のようになっています。
if (scrollBottom < 200) { if (infobarHidden) { ... } } else if (!infobarHidden) { ... } -
スクロール位置が画面最下部から200ピクセル以内で、かつ情報バーが隠れている場合は情報バーを表示します。初期状態では情報バーはCSSで「right: -414px;」となっていました、そのrightプロパティを「0」にすることで、情報バーが右端に表示された状態にします。css()メソッドを用いると、スタイルのプロパティを変更することができます。
infobar.css('right', 0); -
スクロール位置が画面最下部から200ピクセル以上離れており、情報バーが表示されている場合はそれを隠します。画面の右外側に情報バーを追い出すため、(6)と同様に情報バーのrightプロパティを変更します。単純にコーディングすると、以下のようになるでしょう。
infobar.css('right', -414);ただしこれだと、もし情報バーの横幅を変更することになった場合、CSSだけではなくここのコードも修正する必要が生じてしまいます。そうした手間を避けるため、ここでは情報バーの横幅を動的に取得するようにしましょう。jQueryが持つ「outerWidth()」というメソッドを使用すれば、要素の横幅（要素のボーダーの太さも含む）を簡単に取得することができます。
infobar.css('right', -infobar.outerWidth());
サンプルの説明は以上です。ブラウザで表示し、スクロールして確認してみてください。
