jQueryを使用してユーザーが特定の要素に到達したときにイベントをトリガーするにはどうすればよいですか?

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

Web デザインでは、ユーザーが特定の要素にスクロールしたときにイベントをトリガーすると便利ですページ上で。たとえば、ユーザーが特定のポイントに到達したときに通知を表示したり、アニメーションをアクティブにしたりすることができます。

問題:

遠くに配置されている h1 要素を考えてみましょう。ページを下に移動します:

<code class="html"><h1 id="TRIGGER-EVENT-WHEN-SCROLLED-TO">TRIGGER EVENT WHEN SCROLLED TO.</h1></code>

ユーザーがこの h1 要素までスクロールするか、そのビュー内でスクロールしたときにアラートをトリガーするか、別のアクションを実行したいとします。

解決策:

この問題の解決策は、jQuery のスクロール イベントを利用し、ブラウザーのビューポートに対する要素のオフセットと可視性を計算することにあります。以下に段階的なデモを示します:

<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) && (hT > wS) && (wS+wH > hT+hH)){
       console.log('H1 on the view!');
   }
});</code>

このコード スニペット:

1. h1 のオフセットを計算します: h1 間の距離を決定します。 h1 要素の上部とビューポートの上部。
2. h1 の高さを決定します: h1 要素の高さを計算します。
3. を取得します。ビューポートの高さ: ブラウザのビューポートの高さを計算します。
4. 現在のスクロール位置を取得します: ページの現在の垂直スクロール位置を取得します。
5. オフセットとスクロール位置を比較します: 要素とビューポートの両方の高さを考慮して、現在のスクロール位置が h1 要素の上端と下端の範囲内にあるかどうかを確認します。
6. イベントをトリガーします: 条件が満たされ、h1 要素がビュー内にあることを示すと、アラートの表示やアニメーションの呼び出しなど、必要なアクションが実行されます。

代替実装:

アラートを表示する代わりに、このアプローチを使用して、h1 要素が表示されたときにフェードインできます:

<code class="javascript">$('#scroll-to').fadeIn();</code>

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