フローティングバナーをスクロール中に非表示にする

はじめに

サイトに固定ヘッダーやフッター、フローティングバナー等を設置していると、
メインコンテンツの見える範囲が狭まってしまいます（ノートPCやスマホは特に）。
その対策として、
固定要素をスクロール中は非表示に、止まったら表示されるようにします。

記述例

まずjQueryを読み込みます。

<script src="/asset/js/jquery.js"></script>

HTML

<div class="floatingBnr">
    <a href=""><img src="/asset/img/banner.jpg"></a>
</div>

JS

$(function () {
  $(window).on("scroll touchmove", function () {
    $(".floatingBnr").stop();
    $(".floatingBnr").css("display", "none").delay(500).fadeIn("fast");
  });
});

CSS

.floatingBnr {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

表示例

おわりに

フローティングバナーの乱用はおすすめしませんが、
固定要素は残して置きたいけど、
メインコンテンツもちゃんと見せたい、という時に使えて便利です。