https://hakuyukai.com/cms/wp-content/themes/hakuyukai/js/my-floating-cta.js

1document.addEventListener("DOMContentLoaded", () => {
2  const floatingCta = document.querySelector(".js-floating-cta");
3  if (!floatingCta) return;
4
5  const anchorLinks = floatingCta.querySelectorAll('a[href^="#"]');
6  if (anchorLinks.length === 0) return;
7
8  const targets = [];
9  anchorLinks.forEach((anchorLink) => {
10    const targetId = anchorLink.getAttribute("href").substring(1);
11    const targetElement = document.getElementById(targetId);
12    if (!targetElement) return;
13    targets.push({ anchorLink, targetElement });
14  });
15
16  if (targets.length === 0) return;
17
18  /**
19   * ターゲット要素がビューポート中央を跨いでいるか判定する。
20   * iOS Safariでは visualViewport を使い、アドレスバー伸縮時のズレを防ぐ。
21   */
22  function isTargetInCenter(targetElement) {
23    const rect = targetElement.getBoundingClientRect();
24    const viewportHeight = window.visualViewport?.height ?? window.innerHeight;
25    const centerY = viewportHeight / 2;
26    return rect.top <= centerY && rect.bottom >= centerY;
27  }
28
29  function updateVisibility() {
30    targets.forEach(({ anchorLink, targetElement }) => {
31      if (isTargetInCenter(targetElement)) {
32        anchorLink.classList.add("is-hidden");
33      } else {
34        anchorLink.classList.remove("is-hidden");
35      }
36    });
37  }
38
39  let ticking = false;
40  function scheduleUpdate() {
41    if (ticking) return;
42    ticking = true;
43    requestAnimationFrame(() => {
44      updateVisibility();
45      ticking = false;
46    });
47  }
48
49  window.addEventListener("scroll", scheduleUpdate, { passive: true });
50  window.addEventListener("resize", scheduleUpdate, { passive: true });
51
52  if (window.visualViewport) {
53    window.visualViewport.addEventListener("resize", scheduleUpdate);
54    window.visualViewport.addEventListener("scroll", scheduleUpdate);
55  }
56
57  updateVisibility();
58  window.addEventListener("load", updateVisibility);
59});