kdcsライブラリー

レスポンシブでスマホ状態になった時、トップページのメインビジュアルをスクロールで通過したらヘッダーにクラスを付与して背景色を付ける方法をjQuery版と非jQuery（バニラjs）で記述したもの。

まず初めに横幅が780pxより広い場合、id=”header”に”pc”というクラスを付け、横幅780px以下でid=”header”に”mobile”というクラスを付ける記述で、こちらはjQueryを使っていないバニラjs。

function updateHeaderClass() {
  const header = document.getElementById("header");
  if (!header) return;

  if (window.innerWidth <= 780) {
    header.classList.add("mobileHeader");
    header.classList.remove("pc");
  } else {
    header.classList.add("pc");
    header.classList.remove("mobileHeader");
  }
}

// 初回の実行
updateHeaderClass();

// ウィンドウサイズ変更時にクラス更新
window.addEventListener("resize", updateHeaderClass);

これをもう少しスッキリとモダンにすると以下のようになる
※classList.toggle を使うと、条件に応じてクラスを追加・削除できる

const updateHeaderClass = () => {
  const header = document.getElementById("header");
  if (!header) return;

  const isMobile = window.innerWidth <= 780;
  header.classList.toggle("mobileHeader", isMobile);
  header.classList.toggle("pc", !isMobile);
};

updateHeaderClass();
window.addEventListener("resize", updateHeaderClass);

ここからが本題

jQuery版

$(function () {
  $(window).on('scroll', function () {
      if ($('#mvSlider').height() < $(this).scrollTop()) {
          $('.mobileHeader').addClass('bgColor');
    } else {
          $('.mobileHeader').removeClass('bgColor');
    }
  });
});

次に非jQuery版
スライダーでSwiperを使う場合jQueryが必要ないのでこちらを使う

document.addEventListener("DOMContentLoaded", function () {
  window.addEventListener("scroll", function () {
    const mvSlider = document.getElementById("mvSlider");
    const mobileHeaders = document.querySelectorAll(".mobileHeader");

    if (!mvSlider) return;

    const scrollTop = window.scrollY || document.documentElement.scrollTop;
    const mvHeight = mvSlider.offsetHeight;

    mobileHeaders.forEach(header => {
      if (scrollTop > mvHeight) {
        header.classList.add("bgColor");
      } else {
        header.classList.remove("bgColor");
      }
    });
  });
});