zenet_logo

-株式会社ゼネット技術ブログ-

追従型メニューの作り方

f:id:zenet-tech:20210317103007j:plain

システム事業部の五十島です。

今回は追従型メニューについて説明していきたいと思います。
追従型メニューとは、スマホサイトでよく見る『スクロールしても画面上に表示されているメニューや広告など』になります。
ちょっと難しそうと思うかもしれませんが、簡単なCSS・HTMLとちょっとだけ頭を使うJSで作れてしまいます。

htmlとCCSは以下のようになります。
構造はシンプルで、idが#init_button#button_down_areaのボタンは最初から表示させておいて、 両方が画面上から見えなくなったら、スクロール用のボタン(.scroll_button_area)を表示させるというものです。

<!-- 初期表示のボタン -->
<button id="init_button">スクロールするボタン</button>

<!-- 実際にスクロールするボタン -->
<div class="scroll_button_area">
  <button>スクロールするボタン</button>
</div>
<div style="height: 500px">
  <!-- スペースを開けるためのタグ -->
</div>

<!-- ボタンのスクロール終了位置 -->
<div id="button_down_area">
  <button>スクロールするボタン</button>
</div>
.scroll_button_area {
  display: none;
}

.show_scroll_button {
  display: block;
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  padding: 0px;
  background-color: #ffffee;
}

JSは以下のようになります。
表示している位置の情報を取得して、div.scroll_button_areaに表示させるクラスを追加して、制御しています。

$(document).ready(function() {
  $(function() {
    $(window).on('scroll', function() {
      var topBtn = $('#init_button');

      // ボタンが表示されていない
      if (!topBtn.size()) { return ; }

      // スクロール中のボタン表示
      var scrollArea = $('.scroll_button_area');

      // 開始位置、終了位置の取得
      var startLine = topBtn.offset().top;
      var endLine = $('#button_down_area').offset().top;

      // 表示画面領域の座標取得
      var scrollTop = $(this).scrollTop();
      var scrollBottom = scrollTop + window.innerHeight;

      // 上部ボタンが画面から非表示、
      // 下部ボタンが画面上に表示されるまで
      if ( scrollTop > startLine && scrollBottom <= endLine ) {
        scrollArea.addClass('show_scroll_button');
      } else {
        scrollArea.removeClass('show_scroll_button');
      }
    });
  });
});

offset()メソッドで、画面全体のどの位置に各ボタンがあるのかを取得します。
ScrollTop()window.innerHeightメソッドで表示領域の上下の座標を取得し、 22行目で各ボタンが表示領域に存在しているかを判定しています。
各ボタンが表示領域外の場合はスクロール用のボタンを表示し、それ以外の時は非表示という制御を行なっています。

JSを改良すれば、表示・非表示のタイミングを好きに変更できるので、改良して使って見てください。