TopJavaScriptjQueryプラグイン > 2013年7月
2013年7月 2日

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

July 2,2013 12:33 AM
Tag:[, , ]
Permalink

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

RecommendFooterプラグイン

1.サンプル

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

サンプル
サンプル

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

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

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

2.プラグインのダウンロード

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

jquery.recommendfooter_0.0.1.js

以下、設定方法です。

3.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」の内容が出現します。

4.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()を実行します。

5.オプション

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
    });
});

6.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;
}

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

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

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

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

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

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

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

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

となります(下)。

(クリックで拡大)
ページの表示領域にトリガー要素(H3)が入っていない場合

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

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

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

(クリックで拡大)
ページの表示領域にトリガー要素(H3)が入っている場合

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

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

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3