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

今回はJavaScriptを用いて、スクロール時にfooter部分で止まるフローティングバナー（追従バナー）を実装してみる。もちろん、×をクリック（タップ）すると閉じる仕様である。

今回はスクロールの計算をしないといけないので、考え方が少し難しくなる。

やっていることとしては、

①bodyの高さ
②footerの高さ
③ウィンドウ枠の高さ
④スクロール量の高さ（スクロール量によって数値は変動する）

これらの高さを取得した上で、計算していくことになる。

今回はfooterの一番上の部分に、フローティングバナー（追従バナー）が追従してきたときに固定をするので、先述した①〜④で計算式を作ると下記のようになる。

計算式：①ー（③＋④）<=②

これを言語化すると、
bodyの高さから、（ウィンドウ枠の高さとスクロールした分の高さ）を引いた結果が、footerの高さ以下になるということだ。

これをjavascript側でif文を使って条件をつけて、行いたい処理を書いていけば実現できる。

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="style.js"></script>
</body>
</html>

前回の記事と変わっている箇所は、footerを追加している点だ。

今回の目的は、footer部分でフローティングバナー（追従バナー）が固定されるようにするので、このために記述している。

なお、footerにはid（js_footer）をふっている。

前回の記事はこちら

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.js_close {
  display: none;
}

.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についても、footer部分の見た目を調整するのに記述を追加している。

また、bodyに対して、positionをrelativeに設定している。これはフローティングバナー（追従バナー）をfooterに固定するときに、positonをabsoluteに変更するための指定である。

そのほかは前回の記事とは変わっていない。実装内容はそこまで難しくないので、解説は省略する。

前回の記事はこちら

JavaScriptの記述について

'use strict';

// ×を押すと閉じる
window.onload = function () {
    document.getElementById("js_floatingBanner_close").onclick = function () {
        this.parentNode.classList.add('js_close');
    };
}

// footerで追従バナーを固定
window.addEventListener('scroll', function () {
    const targetElement = document.getElementById('js_floatingBanner');
    const bodyHeight = document.body.clientHeight;
    // ↓document.documentElement.clientHeight +以降の記述はスクロールの高さを取得するための記述であるが、クローム、IEなどの各ブラウザに対応するために記述を分けている
    const windowScrollHeight = document.documentElement.clientHeight + document.documentElement.scrollTop || document.body.scrollTop || document.scrollingElement.scrollTop || window.pageYOffset || window.scrollY;
    const footerHeight = document.getElementById('js_footer').clientHeight;
    if (bodyHeight - windowScrollHeight <= footerHeight) {
        targetElement.style.position = 'absolute';
        targetElement.style.bottom = footerHeight + 'px';
    } else {
        targetElement.style.position = 'fixed';
        targetElement.style.bottom = 0;
    }
});

×を押すと閉じる部分は前回の記事で解説しているので省略する。

前回の記事はこちら

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

window.addEventListenerでscrollした時の処理を記述していく。

まず流用しやすいように、constを使って定数を定義していく。
※定数の名前は任意でつけていただければOK。

targetElement：id（js_floatingBanner）の取得
bodyHeight：document.body.clientHeightでbodyの高さを取得
windowScrollHeight：下記①と②を合算した高さを取得（難しければ分けて定義してもOK）

①document.documentElement.clientHeightでウィンドウ枠の高さ

②document.documentElement.scrollTop || document.body.scrollTop || document.scrollingElement.scrollTop || window.pageYOffset || window.scrollYでスクロールした分の高さ