一定量スクロールした時にモーダルで表示されるバナー

<div class="c_modal" data-modal-content="modal_banner">
  <div class="c_modal_inner">
    <button class="c_modal_btn" data-modal-btn="modal_banner"></button>
    <div class="c_modal_content">
　　　　//画像等のコンテンツ
    </div>
  </div>
</div>

.c_modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	display: none;
	background-color: rgba(0, 0, 0, 0.8);
	&.is_open {
		display: grid;
		place-content: center;
	}
	&_inner {
		position: relative;
		background-color: #fff;
		padding: 20px 10px;
		max-width: 600px;
		width: auto;
	}
	&_btn {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 10;
		background: none;
		outline: none;
		border: none;
		font-size: 50px;
		cursor: pointer;
		padding: 5px;
		margin: 0;
		line-height: 0.8;
		display: inline-block;
		&::before {
			content: "×";
		}
	}
	&_content {
		a{
			&:hover{
				opacity: 0.8;
			}
		}
	}
}

// モーダルを表示/非表示にする関数
function toggleModal(modalId) {
  // 引数で受け取ったmodalIdに該当するモーダル要素を取得
  const modal = document.querySelector([data - modal - content = "${modalId}"]);
  // 取得したモーダル要素が存在する場合、クラスの付与/解除を行う
  if (modal) {
    modal.classList.toggle('is_open');
  }
}

// data-modal-btnを全て取得
const modalBtns = document.querySelectorAll('[data-modal-btn]');
if (modalBtns.length > 0) {
  // data-modal-btnをクリックした際の処理
  modalBtns.forEach(btn => {
    // 各data-modal-btnから対応するmodalIdを取得
    const modalId = btn.dataset.modalBtn;
    // data-modal-btnをクリックした際にtoggleModal関数を呼び出すように設定する
    btn.addEventListener('click', () => toggleModal(modalId));
  });
};

// 規定のスクロール割合を超えたとき一度だけ特定のdata-modal-contentの値を持つ要素にクラス付与する
function modalScrollDisplay(modalId, scrollTrigger = 0.3) {
  // 引数で受け取ったmodalIdに該当するモーダル要素を取得
  const modalContent = document.querySelector('[data-modal-content = "${modalId}"]');

  // 取得したモーダル要素が存在する場合、以下の処理を行う
  if (modalContent) {
    let modalFlg = false; // モーダルを表示したかどうかのフラグ

    function displayModal() {
      // modalFlgがfalseでかつ、現在のスクロール位置が規定の割合を超えた場合、モーダルを表示する
      if (!modalFlg && window.scrollY > (document.documentElement.scrollHeight - window.innerHeight) * scrollTrigger) {
        modalFlg = true; // モーダル表示済みのフラグをtrueにする
        toggleModal(modalId); // モーダル表示のための関数を呼び出す
      }
    }

    window.addEventListener("load", displayModal); // ページの読み込みが完了した時に関数を実行
    window.addEventListener("scroll", () => requestAnimationFrame(displayModal)); // スクロール時に関数を実行
  }
}

// data-modal-content属性が"modal_banner"の要素に対して、モーダル表示の関数を適用する
modalScrollDisplay("modal_banner");