// ============================================ // MARKE MACHT. – JavaScript // ============================================ // --- Navigation Scroll Effect --- const nav = document.getElementById('nav'); const handleNavScroll = () => { if (window.scrollY > 50) { nav.classList.add('scrolled'); } else { nav.classList.remove('scrolled'); } }; window.addEventListener('scroll', handleNavScroll); window.addEventListener('load', handleNavScroll); // --- Mobile Menu Toggle --- const navToggle = document.getElementById('navToggle'); const navMobile = document.getElementById('navMobile'); if (navToggle && navMobile) { navToggle.addEventListener('click', () => { navMobile.classList.toggle('active'); document.body.style.overflow = navMobile.classList.contains('active') ? 'hidden' : ''; }); // Close mobile menu on link click const mobileLinks = navMobile.querySelectorAll('a'); mobileLinks.forEach(link => { link.addEventListener('click', () => { navMobile.classList.remove('active'); document.body.style.overflow = ''; }); }); } // --- Smooth Scroll for Anchor Links --- document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { const href = this.getAttribute('href'); if (href === '#') return; e.preventDefault(); const target = document.querySelector(href); if (target) { const navHeight = nav.offsetHeight; const targetPosition = target.getBoundingClientRect().top + window.scrollY - navHeight - 20; window.scrollTo({ top: targetPosition, behavior: 'smooth' }); } }); }); // --- Intersection Observer for Animations --- const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('visible'); observer.unobserve(entry.target); } }); }, observerOptions); // Observe elements with animation classes document.querySelectorAll('.symptom-card, .quote-block, .intro-block, .cta-block').forEach(el => { observer.observe(el); }); // --- Active Navigation Link --- const setActiveNavLink = () => { const currentPage = window.location.pathname.split('/').pop() || 'index.html'; const navLinks = document.querySelectorAll('.nav-link, .nav-mobile-link'); navLinks.forEach(link => { const href = link.getAttribute('href'); if (href === currentPage || (currentPage === '' && href === 'index.html')) { link.classList.add('active'); } else { link.classList.remove('active'); } }); }; window.addEventListener('load', setActiveNavLink);