小粋空間  -  a cheap joke and a play on words site

スクロールしたときにおすすめ記事を右下からにゅるっと表示させるjQuery「RecommendFooterプラグイン」

スクロールしたときにおすすめ記事を右下からにゅるっと表示させるjQuery「RecommendFooterプラグイン」を公開します。

１．サンプル

サンプルを用意しました。

サンプル

スクロールして「タイトル4」が表示されると、ページ右下からおすすめ記事のボックスが表示されます。

また、逆スクロールして「タイトル4」が表示されなくなるとボックスが隠れます。

さらに、ボックスが表示されているスクロール位置でリロードを行うとボックスが再表示されます。

２．プラグインのダウンロード

下記のリンクからプラグインをダウンロードして、ファイル名を「jquery.recommendfooter.js」にリネームしてください。

jquery.recommendfooter_0.0.1.js

以下、設定方法です。

３．HTML

下からにゅるっと表示させたいHTMLを、body終了タグの前に次のように記述します。

<div id="recommend">
  <h3>おすすめ記事</h3>
  <ul>
    <li>あああ</li>
    <li>いいい</li>
    <li>ううう</li>
    <li>えええ</li>
    <li>おおお</li>
  </ul>
</div>

表示させたい部分の一番外側の要素にid属性「recommend」を設定します。HTML要素は何でも使えると思います。

そして、スクロールしたときのトリガーにしたい要素に、class属性「recommend-trigger」を設定します。冒頭のサンプルでは4つめのh2要素に設定しています。

<h2 class="recommend-trigger">タイトル4</h2>

この要素が表示領域に入ると、id属性「recommend」の内容が出現します。

４．JavaScript

JavaScriptは次のように記述します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.recommendfooter.js"></script>
<script>
jQuery(function() {
    jQuery('#foo').recommendFooter();
});
</script>

トリガーの要素と表示したい要素を含む親要素に対してrecommendFooter()を実行します。

５．オプション

recommendFooter()を実行時のオプションとして下記を用意しています。

• triggerAreaName：トリガー要素のclass属性値。デフォルトは「recommend-trigger」
• recommendAreaName：表示する要素のid属性値。デフォルトは「recommend」
• slideUpSpeed：表示する要素をスライドアップで表示するときの速度。デフォルトは「300」
• slideDownSpeed：表示する要素をスライドダウンで表示するときの速度。デフォルトは「300」

オプションは次のように設定してください。

jQuery(function() {
    jQuery('#foo').recommendfooter({
        triggerAreaName: 'foo',
        recommendAreaName: 'bar',
        slideUpSpeed: 200,
        slideDownSpeed: 200
    });
});

６．CSS

表示させたいボックスに対し、下記のCSSを設定してください。赤色が必須のプロパティです。

#recommend {
    display: none;
    position: fixed;
    right: 15px;
    bottom: 0;
    width: 200px;
    background: #fff;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    border-left: 1px solid #000;
    padding: 5px;
}

あとはお好みにあわせてどうぞ。

７．要素をページ下から表示させる仕組み

スクロールを行うとscroll()イベントが発火し、class属性値「recommend-trigger」の要素を検索し、スクロール位置・ウィンドウの高さ・要素のオフセットを計算し、要素のオフセットが「スクロール位置+ウィンドウの高さ」より小さくなった時点で、隠している要素を表示します。

具体的には次のとおりです。

まず、計算に使う要素は次の3つです。

• スクロール（上）位置：$(window).scrollTop()
• ウィンドウの高さ：$(window).height()
• 要素（上）のオフセット：$('h3').offset().top

ページの表示領域にトリガー要素（H3）が入っていない場合、

$(window).scrollTop() + $(window).height() < $('h3').offset().top

となります（下）。

（クリックで拡大）

ページの表示領域にトリガー要素（H3）が入ると、

$(window).scrollTop() + $(window).height() > $('h3').offset().top

となるので、隠していた要素を表示します（下）。

（クリックで拡大）

ウィンドウの高さをリサイズしなければ「ウィンドウの高さ」は固定値で、「要素のオフセット」も固定値なので、「スクロール位置」だけが計算式で可変となります。

認識が誤っていたらどこかでつぶやいてください。