下から飛び出るスマホメニュー

CSS（スタイルシート部分）

  • footer 要素が position: fixed; で画面下部に固定。スクロールしてもフッターメニューが常に画面下部に表示。
  • transition: .5s; は、フッターの表示・非表示に関するアニメーション効果を指定。このスタイルによりフッターが表示・非表示になる際に0.5秒の滑らかな動きが付加。
  • footer .inner は、メニュー内のアイコンやボタンを中央に配置、flexbox を使用して配置と整列を調整。
  • .rounded-circle は、ボタンのスタイルで丸い形状と半透明の効果（opacity: 0.75;）を持たせています。

追加 CSS

/* フッターメニュー用スタイル */
footer {
  width: 100%;
  height: 90px;
  position: fixed;
  bottom: 0;
  transition: .5s;
}

footer .inner {
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
}

footer .inner .rounded-circle {
  opacity: 0.75;
}

HTML（footer.php のメニュー部分）

  • メニューは <footer> タグ内にあり、それぞれのボタンはリンクとして配置。
  • <i> タグでフォントアイコン（Font Awesome）を表示。
  • ボタンのスタイルには btn btn-primary クラスが付いて、Bootstrapのボタンスタイルを利用。
  • rounded-circle でボタンが丸く表示され、p-0 や style=”width:3.0rem;height:3.0rem;” によりサイズ調整。

footer.php

<!-- フッター -->
<footer id="page-footer" role="main-info">
  <div class="inner">
    <!-- 01-Button -->
    <div class="text-center">
      <a href="#">
        <button type="button" class="btn btn-primary rounded-circle p-0" style="width:3.0rem;height:3.0rem;">
          <i class="fas fa-bars text-white fa-lg"></i>
        </button>
        <p class="small mb-n4">Menu</p>
      </a>
    </div>
    <!-- 02 -->
    <div class="text-center">
      <a href="#">
        <button type="button" class="btn btn-primary rounded-circle p-0" style="width:3.0rem;height:3.0rem;">
          <i class="far fa-calendar-alt text-white fa-lg"></i>
        </button>
        <p class="small mb-n4">New</p>
      </a>
    </div>
    <!-- 03-->
    <div class="text-center">
      <a href="#">
        <button type="button" class="btn btn-primary rounded-circle p-0" style="width:3.0rem;height:3.0rem;">
          <i class="far fa-plus-square text-white fa-lg"></i>
        </button>
        <p class="small mb-n4">Regist</p>
      </a>
    </div>
    <!-- 04 -->
    <div class="text-center">
      <a href="#">
        <button type="button" class="btn btn-primary rounded-circle p-0" style="width:3.0rem;height:3.0rem;">
          <i class="fas fa-search text-white fa-lg"></i>
        </button>
        <p class="small mb-n4">Search</p>
      </a>
    </div>
    <!-- 05 -->
    <div class="text-center">
      <a href="#">
        <button type="button" class="btn btn-primary rounded-circle p-0" style="width:3.0rem;height:3.0rem;">
          <i class="fas fa-share-alt text-white fa-lg"></i>
        </button>
        <p class="small mb-n4">Share</p>
      </a>
    </div>
  </div>
</footer>

script.jsファイル

  • スクロール操作に応じてフッターメニューの表示・非表示を切り替える動作が実装
  • 下にスクロールするとフッターメニューが画面から隠れ、上にスクロールすると再び表示される動作を実現

1. 初期設定

  • 変数の初期化：
    • start_position = 0：ページを読み込んだときのスクロール位置を初期化。最初はスクロール位置が0。
    • window_position：現在のスクロール位置を保存するための変数。
    • $window = $(window)：jQueryを使ってブラウザのウィンドウを $window として参照。ウィンドウのスクロールイベントを監視。
    • $footer = $(‘footer’)：<footer> 要素を $footer として参照。これがスクロールに応じて動作するフッターメニューです。

2. スクロールイベントの処理

  • スクロールイベントの登録：
    • $window.on(‘scroll’, function() {…})：スクロールイベントが発生するたびに、この関数が実行。これにで、スクロールするたびにフッターが表示されるか隠れるかを判断。
  • スクロール位置の取得：
    • window_position = $(this).scrollTop();：現在のスクロール位置を取得。この値はスクロールが下に進むと増加、上に進むと減少。
  • スクロール方向の判断：
    • if (window_position <= start_position)：現在のスクロール位置 window_position が前の位置 start_position より小さい＝上にスクロールしていることを意味。＝フッターを表示します。
    • $footer.css(‘bottom’, ‘0’);：フッターメニューを画面下部に固定して表示。
    • else：スクロール位置が増加＝下にスクロールしている場合＞フッターメニューを隠す。
    • $footer.css(‘bottom’, ‘-90px’);：フッターメニューを画面外に移動させて非表示。
  • スクロール位置の更新：
    • start_position = window_position;：現在のスクロール位置を次の判定のために保存。これにより、次のスクロール時にスクロールの方向を判断できます。

3. ページ読み込み時のスクロールイベント

  • $(window).trigger(‘scroll’);：ページが読み込まれたときにもスクロールイベントを発生させることで、ページがすでにスクロールされた状態でもフッターメニューの表示/非表示を適切に反映させます。

assets＞javascript＞script.js

/*
下スクロールでヘッダーフッターを隠し，
上スクロールで出現させる．
モバイルファーストが基本なため，
画面領域を有効活用したい場合に有効
*/

$(function(){
  let start_position = 0, //初期位置０
  window_position,
  $window = $(window),
  $footer = $('footer');

  // スクロールイベントを設定
  $window.on( 'scroll' , function(){
    // スクロール量の取得
    window_position = $(this).scrollTop();

    // スクロール量が初期位置より小さければ，
    // 上にスクロールしているのでヘッダーフッターを出現させる
    if (window_position <= start_position) {
      $footer.css('bottom','0');
    }
    else {
      $footer.css('bottom','-90px');
    }

  // 現在の位置を更新する
  start_position = window_position;
  }
  );
  // 中途半端なところでロードされても良いようにスクロールイベントを発生させる
  $window.trigger('scroll');
  }
);