【jQuery】docutype宣言を忘れると$(window).height()が取れない

2018年11月28日

死んだコード

        $(window).scroll(function () {
            //最上部から現在位置までの距離を取得して、変数[now]に格納
            var now = $(window).scrollTop();

            //最下部から現在位置までの距離を計算して、変数[under]に格納
            var under = $('body').height() - (now + $(window).height());
            ////////////////////////////////////
            if (now > 10 && under > 50) {
                $('#footbanner').fadeIn('normal');
            } else {
                $('#footbanner').fadeOut('slow');
            }
        });

このコードは$('body’).height()と、$(window).height() を計って、スクロールが一定量に達したときだけfadeIn fadeOutを動かすコードでした。

つまり、スクロールで追従バナーが表示されたり消えたりするコード

 

このコードが、ある1つのサイトだけ動かない

とあるサイトに設置したところ、scrollのイベントが発火した瞬間(スクロールをしたとき)に、ifの判定結果がfalseになってバナーがfadeOutしてしまいました。
バナーが一瞬しか見えない……。

とても使いまわししていたコードなので、コード側に動かなくなるような問題はないはずです。

ものすごくconsole.log()した結果わかったのは「$(window).height()」の計測結果が変。

jsのコードが悪いんじゃなかった

html側のソースに誤りがありました。DOCTYPE宣言が無かったのです。

<!DOCTYPE html>

DOCTYPE宣言が無いと、JavaScriptが正しく動作しないことがあるんですね……。

 

参考

https://code.i-harness.com/ja/q/f84a4e