94 lines
2.9 KiB
JavaScript
94 lines
2.9 KiB
JavaScript
// ============================================
|
||
// 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);
|