【Arkhe】固定フッターメニューの作り方

/* 固定フッターメニューのスタイル */
.fixed-menu {
  position: fixed; /* 画面の特定位置に固定 */
  bottom: 0; /* 画面の下端に配置 */
  left: 0; /* 左端に配置 */
  width: 100%; /* 横幅を画面全体に広げる */
  z-index: 1000; /* 他の要素よりも上に表示 */
  background-color: #fdfdfd; /* 背景色 */
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1); /* 上方向に薄い影を追加 */
  text-align: center; /* メニュー内のコンテンツを中央揃えに */
  transform: translateY(100%); /* 初期状態でメニューを隠す */
  transition: transform 0.3s ease; /* メニューが表示・非表示になるときのアニメーション効果 */
}

/* メニューが表示される状態のスタイル */
.fixed-menu.visible {
  transform: translateY(0); /* メニューを画面内に表示 */
}

/* メニュー内の画像のスタイル */
.fixed-menu img {
  display: inline-block; /* 他の要素と一緒に横並びに配置可能 */
  vertical-align: middle; /* 垂直方向の位置を中央 */
}

/* メニュー内のテキストのスタイル */
.fixed-menu p {
  font-size: 0.9rem; /* フォントサイズを設定 */
  margin: 0; /* 上下左右の余白をなしに設定 */
}

<script>
document.addEventListener('DOMContentLoaded', () => {
  // ページの読み込みが完了したら実行
  const fixedBlock = document.querySelector('.fixed-menu'); // 固定メニュー要素を取得
  if (!fixedBlock) return; // 要素が存在しない場合は処理を中断

  let hasScrolled = false; // ユーザーがスクロールしたかどうかを管理するフラグ

  // スクロール時にメニューを表示する処理
  const handleScroll = () => {
    if (window.scrollY > 0 && !hasScrolled) {
      // ページがスクロールされており、かつ初回のスクロールである場合
      hasScrolled = true; // フラグをtrueに設定
      fixedBlock.classList.add('visible'); // メニューを表示するクラスを追加
    }
  };

  // スクロールイベントにデバウンスを適用（処理の頻度を抑える）
  let timeout; // タイマーIDを保持する変数
  window.addEventListener('scroll', () => {
    if (timeout) clearTimeout(timeout); // 前回のタイマーをクリア
    timeout = setTimeout(handleScroll, 100); // 100ms後にhandleScrollを実行
  });
});
</script>