【jQuery】でスクロールでフェードインがうまくいかなかった原因

jQueryで、スクロールで要素がフェードインするエフェクトを付けた時のお話。
以前に作った時はうまくいったものの、今回同じ様にやろうとしたらうまくいきませんでした。
そのコードがこちら。

（なつ記メモさんを参考にさせていただきました。ありがとうございます！）

$(function () {
  $(window).scroll(function(){
    const wHeight = $(window).height(); //ウィンドウの高さを取得
    const scrollAmount = $(window).scrollTop(); //スクロール位置を取得
	
	//クラスscrollAnimeが付いた全ての要素に処理を繰り返す
    $('.scrollAnime').each(function(){
		const targetPosition = $(this).offset().top; //要素のドキュメント全体においての位置を取得
		//現在のスクロール位置がtargetPositionに及んだら
		if(scrollAmount > targetPosition - wHeight + 60) {
	        $(this).addClass("fadeInDown"); //.scrollAnimeが付いた要素に、fadeInDownクラスを追加する
	    }
    })
  });
});

$(function () {

$(window).scroll(function(){

const wHeight = $(window).height(); //ウィンドウの高さを取得

const scrollAmount = $(window).scrollTop(); //スクロール位置を取得

//クラスscrollAnimeが付いた全ての要素に処理を繰り返す

$('.scrollAnime').each(function(){

const targetPosition = $(this).offset().top; //要素のドキュメント全体においての位置を取得

//現在のスクロール位置がtargetPositionに及んだら

if(scrollAmount > targetPosition - wHeight + 60) {

$(this).addClass("fadeInDown"); //.scrollAnimeが付いた要素に、fadeInDownクラスを追加する

}

})

});

HTMLは、スクロールで画面に入ったらフェードイン表示させたい要素に、クラス「scrollAnime」を付けます。

CSSはこちら。

.scrollAnime {
  opacity: 0;
}

.fadeInDown {
  animation-name: fadeInDown;
  animation-duration: 5s;
  animation-fill-mode: forwards;
}
  @keyframes fadeInDown {
    0% {opacity: 0;}
    100% {opacity: 1; transform: translate(0);}
  }

.updown {transform: translateY(-100px);}/*上から下へ*/
.downup {transform: translateY(100px);}/*下から上へ*/

.sect {overflow: hidden;}/*スクロールバーが出ないようにする（左右の動きの場合のみ）/
.slide-right {transform: translateX(200px);}/*左から右へ*/
.slide-left {transform: translateX(-200px);}/*右から左へ*/

.scrollAnime {

opacity: 0;

}

.fadeInDown {

animation-name: fadeInDown;

animation-duration: 5s;

animation-fill-mode: forwards;

}

@keyframes fadeInDown {

0% {opacity: 0;}

100% {opacity: 1; transform: translate(0);}

}

.updown {transform: translateY(-100px);}/*上から下へ*/

.downup {transform: translateY(100px);}/*下から上へ*/

.sect {overflow: hidden;}/*スクロールバーが出ないようにする（左右の動きの場合のみ）/

.slide-right {transform: translateX(200px);}/*左から右へ*/

.slide-left {transform: translateX(-200px);}/*右から左へ*/

スクロールすると、.scrollAnimeを付けた全部の要素が同時に発動する…

原因を探るため、それぞれの値を出力してみてみました。

const pos = [
      {'wHeight': wHeight},
      {'scrollAmount': scrollAmount},
      {'targetPosition': targetPosition},
      {'calc': targetPosition - wHeight + 60},
      {'result': scrollAmount > targetPosition - wHeight + 60}
  ];
  console.log(pos);

const pos = [

{'wHeight': wHeight},

{'scrollAmount': scrollAmount},

{'targetPosition': targetPosition},

{'calc': targetPosition - wHeight + 60},

{'result': scrollAmount > targetPosition - wHeight + 60}

];

console.log(pos);

すると…

wHeight（＝$(window).height()）が3000以上ある…おかしくない？

それにより、条件分岐している

if(scrollAmount > targetPosition - wHeight + 60)

1	if(scrollAmount > targetPosition - wHeight + 60)

の計算が全て負の値になってしまうため、結果が全てTrueになってしまい、

全ての要素にクラス「fadeInDown」が付いてしまっていました。

$(window).height()が正しく取れないとしたらなぜ？

前に作ったデータを見返して、同じ様に値を出力してみたところ、

$(window).height()の値は、1000くらいでした。

ということはやはりここが原因。

調べた結果、

<!DOCTYPE html>

が入っていないと、$(window).height()が正しく取れない、ということがわかりました！！

実は、今回のサイトはWordPressの自作テーマなのですが、

最初にテーマを作成する際に、最小限テーマをDLしまして、

そちらにDOCTYPEの宣言が入っておらず、気が付かないまま使っていました…

できた！

WordPressのheader.phpに<!DOCTYPE html>を追加したところ、

無事、できました！！

生JSでもそうなのかな？

とりあえず、表示域が取れてなさそうな時は、チェックしてみてください♪