OU / script.js
Johnny0619's picture
Upload 2 files
a7ec7fe verified
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');
}
});
});
}
});