jQueryで特定の要素にスクロールするときにイベントをトリガーするにはどうすればよいですか?

jQuery で特定の要素に到達したときにイベントをトリガーする

問題

ユーザーが Web ページを下にスクロールして到達したときに警告メッセージを表示したいと考えています特定の h1 要素。彼らは、scroll() イベントを使用しようとしましたが、うまくいきませんでした。

解決策

h1 要素がブラウザのビューにいつ入るかを判断するには、上からのオフセットを計算して比較する必要があります。現在のスクロール値を使用します。修正されたコードは次のとおりです。

<code class="javascript">$(window).scroll(function() {
   var hT = $('#scroll-to').offset().top,
       hH = $('#scroll-to').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
   if (wS > (hT+hH-wH) && wS < hT && wS+wH > hT+hH){
       console.log('H1 on the view!'); // or trigger any desired event
   }
});</code>

機能強化

• デモ フィドル: アラートのないライブ サンプルで、代わりに h1 要素がフェードインされています。
• 更新されたコード: スクロール方向に関係なく、要素がビューポート内にあるかどうかを確認します。
• 更新されたデモ フィドル: 更新されたコードの機能を示します。 .

以上がjQueryで特定の要素にスクロールするときにイベントをトリガーするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。