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

要素が表示領域に現れたら発火するjQueryプラグインです。
どこまでスクロールされたかを計測し、それをGoogle Analyticsにイベント送信するために作りました。
概要要素がどこまで表示されたかをパーセンテージで指定できるので、細かい計測が可能です。

動作サンプル

上記サンプルの設置例

<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」イベント（画面表示時とスクロール時）以外の時に、計測する場合に指定してください。

関連リンク