jqueryのクラス付与について。もしくはjqueryの更新タイミングについて

前提

jqueryにて、スクロールにて対象まで移動し、thisで対象を取得するとclass付与する設定をしたのですが、ウィンドの端にカーソルを持っていき、ドラッグにて画面サイズを縮小・拡大すると縮小・拡大する前はスクロールにてclass付与されていたものが、縮小・拡大後はクラスが消えている現象があり枚ⓢた。

実現したいこと

ここに実現したいことを箇条書きで書いてください。

  • ウィンドをドラッグにて縮小・拡大してもclass付与が消えないでほしい。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTML <div> <p> <span class="bgextend bgLRextendTrigger2"> <span class="bgappearTrigger"> テキスト </span> </span> </p> <p"> <span class="bgextend bgLRextendTrigger3"> <span class="bgappearTrigger"> テキスト </span> </span> </p> </div> JS jQuery('.bgLRextendTrigger2').each(function () { //bgLRextendTriggerというクラス名が var elemPos = jQuery(this).offset().top - 20;//要素より、50px上の var scroll = jQuery(window).scrollTop(); var windowHeight = jQuery(window).height(); if (scroll >= elemPos - windowHeight + 180) { jQuery(this).addClass('bgLRextend2');// 画面内に入ったらbgLRextendというクラス名を追記 } }); jQuery('.bgLRextendTrigger3').each(function () { //bgLRextendTriggerというクラス名が var elemPos = jQuery(this).offset().top - 20;//要素より、50px上の var scroll = jQuery(window).scrollTop(); var windowHeight = jQuery(window).height(); if (scroll >= elemPos - windowHeight + 180) { jQuery(this).addClass('bgLRextend3');// 画面内に入ったらbgLRextendというクラス名を追記 } }); jQuery('.bgappearTrigger2').each(function () { //bgappearTriggerというクラス名が var elemPos = jQuery(this).offset().top - 20;//要素より、50px上の var scroll = jQuery(window).scrollTop(); var windowHeight = jQuery(window).height(); if (scroll >= elemPos - windowHeight + 180) { jQuery(this).addClass('bgappear');// 画面内に入ったらbgappearというクラス名を追記 } }); jQuery('.bgappearTrigger3').each(function () { //bgappearTriggerというクラス名が var elemPos = jQuery(this).offset().top - 20;//要素より、50px上の var scroll = jQuery(window).scrollTop(); var windowHeight = jQuery(window).height(); if (scroll >= elemPos - windowHeight + 180) { jQuery(this).addClass('bgappear');// 画面内に入ったらbgappearというクラス名を追記 } }); } // 画面をスクロールをしたら動かしたい場合の記述 jQuery(window).scroll(function () { BgFadeAnime();/* アニメーション用の関数を呼ぶ*/ });// ここまで画面をスクロールをしたら動かしたい場合の記述 // 画面が読み込まれたらすぐに動かしたい場合の記述 jQuery(window).on('load', function () { BgFadeAnime();/* アニメーション用の関数を呼ぶ*/ });// ここまで画面が読み込まれたらすぐに動かしたい場合の記述

試したこと

スクロールにて取得する位置の調整

補足情報(FW/ツールのバージョンなど)

wordpress テーマ divi バージョン: 4.19.4

コメントを投稿

0 コメント