Spaces:
Sleeping
Sleeping
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');
}
});
});
}
}); |