トップからスクロールしたら追従メニューを表示させる

ヘッダーメニューやフッターメニューを追従させたいが、トップから特定の位置までスクロールさせてから表示させたいケースもあると思います。

このページでは、

・トップから特定の位置までスクロールしたらメニューを表示させる
・特定位置よりも前に戻ったらメニューを非表示にさせる

上記の方法を説明させて頂きたいと思います。

デモで確認

まずは、あなたの実装イメージと齟齬がないか確認してみてください。

デモでは、フッターですが、ヘッダーメニューでも、その他の追従コンテンツにも流用できます。

時間がない人は内容の説明を飛ばして、コピペでもOKです。

ただし、それほど難しい内容ではないので、軽く目を通して頂けると嬉しいです！

実装内容

実装内容は、シンプルで

・特定のclassが表示された時点で、メニューを表示させる
・特定のclassが表示されるよりも上にスクロールしたらメニューを非表示にする

これだけです。

上記を達成するために、jsでclassの位置を取得し、その位置よりもスクロール位置よりも高いか低いか監視し、styleを変更しています。

document.addEventListener("DOMContentLoaded", () => {
  const targetElement = document.querySelector(".target");
  const footerMenu = document.querySelector(".footer-menu");

  const handleScroll = () => {
    const targetPosition = targetElement.getBoundingClientRect().top;
    const windowHeight = window.innerHeight;

    if (targetPosition <= windowHeight) {
      footerMenu.style.bottom = "0px";
    } else {
      footerMenu.style.bottom = "-100px";
    }
  };

  window.addEventListener("scroll", handleScroll);
});

アニメーションする場合

デモの場合は、下から上にスライドさせているので、bottomで位置を調整しています。

cssの設定は下記となっています。

.footer-menu {
  position: fixed;
  left: 0;
  width: 100%;
  background: #333;
  color: white;
  display: block;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
  transition: .3s;//アニメーションで必要
  bottom: -100px;//アニメーションで必要
}

スライドが不要なら、display:blockとdisplay:noneの切り替えでもOKです。

まとめ

特定のclassやidの位置の取得したり、現在のスクロール位置をスクロールする方法は、他のアニメーションなどでも使用することが多いので、覚えておくと良いでしょう。