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