[解決済み] ユーザーが特定の要素にスクロールしたときにイベントを発生させる - jQueryを使用した場合

質問

h1がページのかなり下の方にあるのですが...。

<h1 id="scroll-to">TRIGGER EVENT WHEN SCROLLED TO.</h1>

で、ユーザーがh1までスクロールしたとき、またはブラウザのビューにh1があるときにアラートをトリガーしたいと思います。

$('#scroll-to').scroll(function() {
     alert('you have scrolled to the h1!');
});

どうすればいいですか？

どのように解決するのですか？

を計算することができます。 offset を計算し、それを scroll のような値で比較します。

$(window).scroll(function() {
   var hT = $('#scroll-to').offset().top,
       hH = $('#scroll-to').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
   if (wS > (hT+hH-wH)){
       console.log('H1 on the view!');
   }
});

これを確認する デモ・フィドル

更新情報 デモ・フィドル アラートなし -- 代わりに要素をFadeIn()する。

要素がビューポート内にあるかどうかをチェックするコードを更新しました。このため、if文にいくつかのルールを追加することで、上下にスクロールしていても動作します。

   if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){
       //Do something
   }

デモ・フィドル