https://arne.media/wp-content/themes/arne-v2.2/assets/js/base.js?ver=1790918567

1window.addEventListener('DOMContentLoaded', function () {
2  // ハンバーガーメニュー全体と開閉ボタンを取得
3  const menu = document.querySelector('.header__menu');
4  const button = document.querySelector('.header__menu__icon');
5  const menuAnkers = document.querySelectorAll('.header__menu a');
6  if (!menu || !button) return;
7
8  button.addEventListener('click', function (e) {
9    e.stopPropagation();
10
11    // open クラスを付け外しして開閉状態を取得
12    const isOpen = menu.classList.toggle('open');
13    // aria-expanded を状態に合わせて更新
14    button.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
15    // body に開閉状態クラスを設定
16    document.body.classList.toggle('is-menu-open', isOpen);
17  });
18
19  // メニュー内クリックでは閉じないようにする
20  menu.addEventListener('click', function (e) {
21    e.stopPropagation();
22  });
23
24  // メニュー外をクリックしたら閉じる
25  document.addEventListener('click', function () {
26    menu.classList.remove('open');
27    button.setAttribute('aria-expanded', 'false');
28    document.body.classList.remove('is-menu-open');
29  });
30
31  // Escキーを押したらメニューを閉じる
32  document.addEventListener('keydown', function (e) {
33    if (e.key === 'Escape') {
34      menu.classList.remove('open');
35      button.setAttribute('aria-expanded', 'false');
36      document.body.classList.remove('is-menu-open');
37    }
38  });
39
40  //  メニュー内のリンクをクリックしたらメニューを閉じる
41  for (var a = 0; a < menuAnkers.length; a++) {
42    menuAnkers[a].addEventListener('click', function () {
43      setTimeout(function () {
44        menu.classList.remove('open');
45      }, 300);
46    });
47  }
48
49  // ヘッダー固定
50  const header = document.querySelector('.header');
51  let headerHeight = header.offsetHeight;
52  const mv = document.querySelector('.mv');
53  if(mv){
54    header.classList.add('header-top');
55  }
56  window.addEventListener('scroll', function(){
57    const scrollY = window.pageYOffset;
58    const hideStart = headerHeight;
59    
60    // トップページ
61    if(mv && (!menu.classList.contains('open'))){
62      const fixStart = mv.getBoundingClientRect().top + window.pageYOffset + (mv.clientHeight/2);
63      if(scrollY <= hideStart){
64        // ページトップ
65        header.classList.add('header-top');
66        header.classList.remove('fixed', 'hide');
67      } else if(scrollY < fixStart){
68        // header 非表示
69        header.classList.add('hide');
70      } else {
71        // header 固定
72        header.classList.add('fixed');
73        header.classList.remove('header-top', 'hide');
74      }
75    }
76
77    // 下層ページ
78    if(!mv && (!menu.classList.contains('open'))) {
79      if(scrollY > hideStart){
80        header.classList.add('fixed');
81      } else {
82        header.classList.remove('fixed');
83      }
84    }
85  });
86
87  // ページ内リンク
88  const anchorLinks = document.querySelectorAll('a[href*="#"]');
89  const anchorLinksArr = Array.prototype.slice.call(anchorLinks);
90  anchorLinksArr.forEach(function (link) {
91    link.addEventListener('click', function(e) {
92      e.preventDefault();
93      const href = link.href;
94      const targetId = link.hash;
95      const targetElement = document.querySelector(targetId);
96      setTimeout(() => {
97        if (targetElement) {
98          const targetOffsetTop = targetElement.getBoundingClientRect().top + window.pageYOffset - headerHeight;
99          window.scrollTo({
100            top: targetOffsetTop,
101            behavior: "smooth"
102          });
103        } else {
104          location.href = href;
105        }
106      }, 300);
107    });
108  });
109
110  //  外部リンク
111  const id = location.hash;
112  if (id != '') {
113    window.scrollTo(0, 0);
114    setTimeout(() => {
115      const idElem = document.querySelector(id);
116      const position = idElem.getBoundingClientRect().top + window.pageYOffset - headerHeight;
117      window.scrollTo({
118        top: position,
119        behavior: 'smooth'
120      });
121    }, 300);
122  }
123});