File size: 2,832 Bytes
a7ec7fe
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
document.addEventListener('DOMContentLoaded', () => {
  // ==========================================================================
  // モーダル表示処理 (entry_info.html用)
  // ==========================================================================
  const modal = document.getElementById('imageModal');
  // モーダル要素が存在する場合のみ実行
  if (modal) {
    const modalImg = document.getElementById('modalImg');
    const closeBtn = document.getElementById('modalClose');
    const triggers = document.querySelectorAll('.js-modal-trigger');

    // リンククリックでモーダル表示
    triggers.forEach(trigger => {
      trigger.addEventListener('click', (e) => {
        e.preventDefault();
        const imgSrc = trigger.getAttribute('href');
        modalImg.src = imgSrc;
        modal.classList.add('active');
        document.body.style.overflow = 'hidden'; // 背景スクロール禁止
      });
    });

    // 閉じる処理
    const closeModal = () => {
      modal.classList.remove('active');
      document.body.style.overflow = ''; // スクロール解除
      setTimeout(() => { modalImg.src = ''; }, 300);
    };

    if (closeBtn) {
      closeBtn.addEventListener('click', closeModal);
    }
    
    modal.addEventListener('click', (e) => {
      // 画像以外の領域クリックで閉じる
      if (e.target === modal || e.target.classList.contains('modal-content')) {
        closeModal();
      }
    });
  }

  // ==========================================================================
  // スクロール連動ナビゲーション (guide.html用)
  // ==========================================================================
  const sections = document.querySelectorAll('.section');
  const navLinks = document.querySelectorAll('.side-nav a, .mobile-nav a');
  
  // セクション要素が存在する場合のみ実行
  if (sections.length > 0 && navLinks.length > 0) {
    window.addEventListener('scroll', () => {
      let current = '';
      // スクロール位置に合わせてアクティブなセクションを判定
      // ヘッダーの高さなどを考慮してオフセット値を調整してください
      const offset = 150; 
      
      sections.forEach(sec => {
        const sectionTop = sec.offsetTop;
        if (window.pageYOffset >= sectionTop - offset) {
          current = sec.getAttribute('id');
        }
      });

      navLinks.forEach(link => {
        link.classList.remove('active');
        // アンカーリンクのhref属性と現在のセクションIDを比較
        if (current && link.getAttribute('href').includes(`#${current}`)) {
            link.classList.add('active');
        }
      });
    });
  }
});