Webページの動的変更例１

投稿日: 2013年10月17日 作成者: 関口郁夫

画面下までスクロールすると、タイミングよく情報バーが表示される、という操作に対応したインタラクティブなUIを作成します。

ステップ1　コンテンツと情報バーのマークアップ

＜HTML＞

1
2
3
4
5
6
7
section id="infobar"></pre>
<h1>情報ウィンドウ</h1>
<pre>
    この資料の出典はXXXXです。
 
    全文を読みたければ
<a href="&quot;出典のURL”">こちら</a>からどうぞ。

＜CSS＞

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#infobar {
    /* 画面の固定位置に表示される */
    position: fixed;
    bottom: 10px;
 
    /*
     * rightにwidthを超えるマイナス値を指定することで、
     * 画面外右側に隠れた状態となる。
     */
    right: -414px;
 
    border: 1px solid gray;
    border-top: 4px solid red;
    width: 400px;
    height: 80px;
    background-color: white;
    font-size: 12px;
    padding: 4px;
}

ステップ2　jQueryのインストールとJavaScriptコードの記述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
 
 
// (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());
        }
    });
 
    ...
});

ポイントは、

(1) 「$(function() { … })」のように、$()に関数を与えると、画面の読み込みが完了してから実行する処理を記述できます。
(2) 画面がスクロールすると呼び出される処理を定義しています。
$(document).scroll(function() {
… スクロール時に呼び出される処理 …
});
(3) 現在のスクロール位置が、画面最下部からどれくらい離れているかをピクセル単位で取得する筆者が自作した関数。ブラウザーごとの差異を考慮しつつ、非標準のAPIを使用しているため、多少わかりにくいコードになっています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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;
}

(4)スクロール位置が画面最下部から200ピクセル以内で、かつ情報バーが隠れている場合は情報バーを表示します。css()メソッドを用いると、スタイルのプロパティを変更することができます。
(5)スクロール位置が画面最下部から200ピクセル以上離れており、情報バーが表示されている場合はそれを隠します。
ここでは情報バーの横幅を動的に取得するようにしまた。jQueryが持つ「outerWidth()」というメソッドを使用すれば、要素の横幅（要素のボーダーの太さも含む）を簡単に取得することができます。

 

出典：jQuery入門 with Dreamweaver CS5.5
http://www.adobe.com/jp/devnet/dreamweaver/articles/dwjquery_01.html

カテゴリー: ｊQuery パーマリンク