前提
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 コメント