スクロール時にfooter部分で止まるフローティングバナー（追従バナー）をjQueryで実装してみる（備忘録）

/カテゴリ: , , , /作成者:

今回はjQueryを用いて、スクロール時にfooter部分で止まるフローティングバナー（追従バナー）を実装してみる。

また、×をクリック（タップ）すると閉じる仕様も、今回はふわっと閉じるように変更している。

footer部分でフローティングバナー（追従バナー）固定する考え方は前回の記事で説明しているので、詳細を知りたい方は前回の記事を読んでから本記事を読むことをお勧めしたい。

前回の記事はこちら

デモは下記になる。

demo

それでは解説に入っていく。

HTMLの記述について

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>フローティングバナー（追従バナー）</title>
  <link rel="stylesheet" href="../reset.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main>
    <div class="bl_floatingBanner" id="js_floatingBanner">
      <a href="" class="bl_floatingBanner_img"><img src="img_floating.jpg" alt=""></a>
      <div class="bl_floatingBanner_close" id="js_floatingBanner_close">
        <span></span>
        <span></span>
      </div>
    </div>
    <section>
      <div class="ly_mainvisual">
        <img src="img_mainvisual.jpg" alt="MV">
      </div>
    </section>
    <section>
      <div class="ly_inner" id="menu1">
        <h2>menu1</h2>
        <div class="md_textblock">
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
        </div>
      </div>
    </section>
    <section>
      <div class="ly_inner" id="menu2">
        <h2>menu2</h2>
        <div class="md_textblock">
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
        </div>
      </div>
    </section>
    <section>
      <div class="ly_inner" id="menu3">
        <h2>menu3</h2>
        <div class="md_textblock">
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
        </div>
      </div>
    </section>
    <section>
      <div class="ly_inner" id="menu4">
        <h2>menu4</h2>
        <div class="md_textblock">
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
        </div>
      </div>
    </section>
    <section>
      <div class="ly_inner" id="menu5">
        <h2>menu5</h2>
        <div class="md_textblock">
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
          <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
        </div>
      </div>
    </section>
  </main>
  <footer id="js_footer">
    <div class="ly_inner">
      <h2>footer</h2>
      <div class="md_textblock">
        <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
        <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
        <p>テキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
      </div>
    </div>
  </footer>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="style.js"></script>
</body>
</html>

前回の記事とほぼ変わっていないため、解説は省略する。

違いはjQueryを使うために、下記の記述を追加しているだけである。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

CSSの記述について

@charset "utf-8";

/* ==========================
  初期設定
========================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  position: relative;
}
img {
  width: 100%;
}

/* ==========================
  フローティングバナー（追従バナー）
========================== */
.bl_floatingBanner {
  position: fixed;
  bottom: 0;
  right: 10px;
  width: 150px;
  max-width: 100%;
}
.bl_floatingBanner_img {
  display: block;
  transition: 0.3s;
}
.bl_floatingBanner_img:hover {
  opacity: 0.6;
}
.bl_floatingBanner_close {
  width: 15px;
  height: 15px;
  position: absolute;
  right: 0;
  top: -15px;
  cursor: pointer;
}
.bl_floatingBanner_close span:nth-of-type(1) {
  position: absolute;
  top: 7px;
  right: 0;
  width: 15px;
  height: 1px;
  background-color: #000;
  transform: rotate(45deg);
}
.bl_floatingBanner_close span:nth-of-type(2) {
  position: absolute;
  top: 0;
  right: 7px;
  width: 1px;
  height: 15px;
  background-color: #000;
  transform: rotate(45deg);
}

/* ==========================
  コンテンツの中身
========================== */
.ly_inner {
  width: 100%;
  max-width: 1080px;
  margin: 100px auto;
  padding: 20px;
  background-color: #ccc;
}
.ly_inner h2 {
  font-size: 150%;
  font-weight: bold;
  margin-bottom: 30px;
}
.md_textblock > * + * {
  margin-top: 10px;
}

/* ==========================
  footer
========================== */
footer {
  background-color: #2b2822;
  color: #fff;
}
footer > .ly_inner {
  background-color: transparent;
  margin: 0 auto;
}

CSSについても、下記部分を削除しただけであとは変わっていない。

.bl_floatingBanner.js_close {
  display: none;
}

JavaScriptの記述について

'use strict';

// ×を押すと閉じる
$(function(){
  $("#js_floatingBanner_close").on("click", function() {
    $("#js_floatingBanner").fadeOut(300);
  });
});

// 途中で追従バナーを固定
$(function(){
  $(window).on("scroll", function() {
    const bodyHeight = $(document).height();
    const scrollPosition = $(window).height() + $(window).scrollTop();
    const footerHeight = $("#js_footer").innerHeight();

    if (bodyHeight - scrollPosition <= footerHeight) {
      $("#js_floatingBanner").css({
        position: "absolute",
        bottom: footerHeight
      });
    } else {
      $("#js_floatingBanner").css({
        position: "fixed",
        bottom: 0
      });
    }
  });
});

×を押すと閉じる部分について

×はid（js_floatingBanner_close）で作成しているので、これをクリックしたときに、フローティングバナー（追従バナー）全体が閉じるとようにすればOK。

今回はクリックしたら0.3秒かけてフェードアウトするように設定している。

footerで追従バナーを固定するための処理

前回の記事の記述内容を、jQuery用に書き換えただけなので、解説は省略したい。

以上で実装完了だ。