目次
死んだコード
$(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が正しく動作しないことがあるんですね……。
参考
コメント