TEST-web-siteの4のJSコーディング

(function () {
  const banner = document.getElementById("popup-banner");
  const closeBtn = document.querySelector(".popup-close");
  let lastScrollY = window.scrollY;
  let isClosed = false;

  // ×ボタンでクローズ
  closeBtn.addEventListener("click", function () {
    banner.classList.add("closed");
    isClosed = true;
  });

  // スクロールで表示/非表示
  window.addEventListener("scroll", function () {
    if (isClosed) return; // ×で閉じた場合は何もしない

    const currentScrollY = window.scrollY;

    // TOP（100px未満）→ バナー非表示
    if (currentScrollY < 100) {
      banner.classList.add("hidden");
      banner.classList.remove("show");
      lastScrollY = currentScrollY;
      return;
    }

    // 500px未満 → バナー非表示
    if (currentScrollY < 500) {
      banner.classList.add("hidden");
      banner.classList.remove("show");
      lastScrollY = currentScrollY;
      return;
    }

    // 500px以上 → バナー出現
    if (currentScrollY >= 500) {
      banner.classList.add("show");
      banner.classList.remove("hidden");
    }

    // 3000px以上かつ下スクロール → バナー非表示
    if (currentScrollY >= 3000 && currentScrollY > lastScrollY) {
      banner.classList.add("hidden");
      banner.classList.remove("show");
    }

    // 上スクロール → バナー非表示
    if (currentScrollY < lastScrollY) {
      banner.classList.add("show");
      banner.classList.remove("hidden");
    }

    lastScrollY = currentScrollY;
  });
})();

(function () {
  const modalBanner = document.getElementById("modal-banner");
  const modalClose = document.querySelector(".modal-close");
  const modalOverlay = document.querySelector(".modal-overlay");
  let hasShown = false;
  let scrollPosition = 0;

  // スクロールイベント
  window.addEventListener("scroll", function () {
    if (hasShown) return;

    if (window.scrollY > 6000) {
      showModal();
      hasShown = true;
    }
  });

  // モーダル表示
  function showModal() {
    scrollPosition = window.pageYOffset;
    modalBanner.classList.add("show");

    // スクロール位置を保持してクラス追加
    document.body.style.top = `-${scrollPosition}px`;
    document.body.classList.add("no-scroll");
  }

  // モーダル非表示
  function hideModal() {
    modalBanner.classList.remove("show");
    document.body.classList.remove("no-scroll");
    document.body.style.top = "";

    window.scrollTo(0, scrollPosition);
  }

  // ×ボタンでクローズ
  modalClose.addEventListener("click", hideModal);

  // オーバーレイクリックでクローズ
  modalOverlay.addEventListener("click", hideModal);
})();