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

Barbara Streisand
リリース: 2024-11-02 13:41:02
オリジナル
937 人が閲覧しました

How to Trigger an Event When Scrolling to a Specific Element in 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート