https://taikobank.jp/assets/js/modules/fixed-banner.js?v=16

1export const fixedBanner = () => {
2  // ページ読み込み時に scrolled クラスを非表示
3  document.querySelector("html").classList.remove("scrolled");
4
5  let footerVisible = false; // フッターが表示されているかどうかのフラグ
6
7  // スクロールイベントで300px以上スクロールされたかを監視
8  const handleScroll = () => {
9    // フッターが表示されている場合は scrolled クラスを削除し、処理をスキップ
10    if (footerVisible) {
11      document.querySelector("html").classList.remove("scrolled");
12      return;
13    }
14
15    if (window.scrollY > 300) {
16      document.querySelector("html").classList.add("scrolled");
17    } else {
18      document.querySelector("html").classList.remove("scrolled");
19    }
20  };
21
22  // 初期スクロール位置をチェック
23  handleScroll();
24
25  // スクロール時にチェックするためのリスナーを追加
26  window.addEventListener('scroll', handleScroll);
27
28  // フッターが表示されたらscrolledクラスを削除
29  const footerObserver = new IntersectionObserver(function(entries) {
30    entries.forEach(entry => {
31      if (entry.isIntersecting) {
32        footerVisible = true; // フッターが表示されていることを示すフラグを true に
33        document.querySelector("html").classList.remove("scrolled");
34      } else {
35        footerVisible = false; // フッターがビューポート外に出たらフラグを false に
36      }
37    });
38  }, {
39    root: null,
40    rootMargin: "0px",
41    threshold: 0.0
42  });
43
44  // footer を監視
45  footerObserver.observe(document.querySelector("footer"));
46};