jQueryにて以下の項目を定義し、一定のスクロール位置でaddClass("fadeIn")
が発動するコードを記述しています。
ウィンドウの高さ = wHeight
スクロールした量 = scrollAmount
アニメーション対象の位置 = targetPosition
この設定に加えて、スクロールした位置から再読み込み(command + R)した場合でも発動するように、$(document).ready(function(){ ... });
の中に同様の記述を行いましたがうまくいきません。
定義した変数はうまく読み込まれているようなのですが、
このコードが読み込まれない理由と修正点をお教えいただけないでしょうか?
jQuery
1 2$(function(){ 3 4// --------------------- 5// 読込時 6// --------------------- 7 8 $(document).ready(function(){ 9 var wHeight = $(document).height(); 10 var scrollAmount = $(document).scrollTop(); 11 12 // フェードインアニメーション 13 $('.scrollanime01').each(function () { 14 var targetPosition = $(this).offset().top; 15 console.log(targetPosition); 16 if(scrollAmount > targetPosition - wHeight + 100) { 17 $(this).addClass("fadeIn"); 18 } 19 }); 20 21 }); 22 23// --------------------- 24// スクロール時 25// --------------------- 26 $(window).scroll(function () { 27 var wHeight = $(window).height(); 28 var scrollAmount = $(window).scrollTop(); 29 30 // フェードインアニメーション 31 $('.scrollanime01').each(function () { 32 var targetPosition = $(this).offset().top; 33 if(scrollAmount > targetPosition - wHeight + 100) { 34 $(this).addClass("fadeIn"); 35 } 36 }); 37 38}); 39 40 41
回答1件
あなたの回答
tips
プレビュー