スマホの広告みたいにスクロール中に非表示にする jQuery のコード

公開日： 2016年2月2日火曜日 jQuery

スマホとかでよくある、画面下に張り付いて表示するやつ。
広告とかが多いですよね。

今回は、お電話はこちら的なボタンを表示しているものを、
スクロール中は非表示にする機能の実装。

ズバリ参考になるサイトがあったので、こちらを参考に。
【jQuery】スマホの広告みたいにスクロール中に非表示にするjQueryのコード

jQuery 1.7 の場合だと、 stop の挙動が違うようで、 stop を入れるとうまく行かなかった。
上記サイトは 1.9 以上用ですね。

というわけで、下記のようにして思うような挙動になりました。

$(function(){
  $(window).on("scroll touchmove", function(){ //スクロール中に判断する
    $("footer").css('display', 'none').delay(500).fadeIn('fast');
    //スクロール中は非表示にして、500ミリ秒遅らせて再び表示
  });
});

手持ちの Xpreria でも動作OKでした。