要素が表示領域に現れたら発火するjQueryプラグイン

要素が表示領域に現れたら発火するjQueryプラグインです。
Google Analyticsへのイベント送信もできます（これが目的で作りました）。
何パーセント表示されたら発火するか、という指定もできます。

動作サンプル

ページを下に2ページ分スクロールすると、四角が現れてきます。その要素が表示されたらアラートを出します。

ここでは、全体の７０％が表示されたら、アラートが出るようにしています。

一度アラートが表示されたら、次にページをロードするまでアラートは発生させませんが、スクロールするたびにアラートを出し続ける事もできます。

ページロード時点で表示されている場合も、アラートが表示されます。表示されていることを重視しています。

もうあと半分です。

1
2
3
4
5
6
7
8
9
10

上記サンプルの設置例

<script src="jquery.detectDisplayed.js"></script>

<script>
$(function(){
  $('#element').detectDisplayed({
    callback : function(){
      alert('表示されました');
    },
    percent  : 70 
  });
});
</script>

<div id="element">xxxxxxx</div>

callback オプションに、反応したときのJavascriptコードを書いてください。例えば、Google Analyticsのイベント送信スプリプト、です。

percentオプションは、何パーセント表示されたか、を1～100の間で指定します。何も指定しなければ100%です。

その他オプション
・「continuous」オプション：スクロールする都度チェックし、都度callbackが呼び出されるようになります。
・「events」オプション　　：標準の「load scroll」イベント（画面表示時とスクロール時）以外の時に、計測する場合に指定してください。

ダウンロード

jquery.detectDisplayed.js

※上記リンクを右クリック「保存」でダウンロードしてください

技術情報・簡易ウェブサービス一覧へ

OUR MISSION

理念

「ITで人を豊かにする」

私たちが開発したシステムやサービスを通じ、物心両面から豊かになってもらう。そして人生を楽しんでもらう。そこに私たちが存在する理由があります。
日々新たな製品・サービスを開発・ご提供し、最後まで誠意をもって取り組んで成果を出す。
ご縁を頂いた方やその先の人達に安心と満足をご提供出来る様、誠心誠意取り組んで参ります。

pageTop