85 lines
3.3 KiB
JavaScript
85 lines
3.3 KiB
JavaScript
// Mobile menu toggle
|
|
const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
|
|
const navLinks = document.querySelector('.nav-links');
|
|
mobileMenuBtn.addEventListener('click', () => {
|
|
navLinks.classList.toggle('active');
|
|
});
|
|
// Close mobile menu when clicking on a link
|
|
document.querySelectorAll('.nav-link').forEach(link => {
|
|
link.addEventListener('click', () => {
|
|
navLinks.classList.remove('active');
|
|
});
|
|
});
|
|
// Smooth scrolling for anchor links
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const targetId = this.getAttribute('href');
|
|
if (targetId === '#') return;
|
|
const targetElement = document.querySelector(targetId);
|
|
if (targetElement) {
|
|
window.scrollTo({
|
|
top: targetElement.offsetTop - 90,
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
// Scroll functionality for benefits cards
|
|
const scrollLeftBtn = document.querySelector('.scroll-btn.left');
|
|
const scrollRightBtn = document.querySelector('.scroll-btn.right');
|
|
const cardsWrapper = document.querySelector('.cards-wrapper');
|
|
scrollLeftBtn.addEventListener('click', () => {
|
|
cardsWrapper.scrollBy({ left: -300, behavior: 'smooth' });
|
|
});
|
|
scrollRightBtn.addEventListener('click', () => {
|
|
cardsWrapper.scrollBy({ left: 300, behavior: 'smooth' });
|
|
});
|
|
// Scroll functionality for reviews
|
|
const reviewLeftBtn = document.querySelector('.review-scroll-btn.left');
|
|
const reviewRightBtn = document.querySelector('.review-scroll-btn.right');
|
|
const reviewsWrapper = document.querySelector('.reviews-wrapper');
|
|
reviewLeftBtn.addEventListener('click', () => {
|
|
reviewsWrapper.scrollBy({ left: -350, behavior: 'smooth' });
|
|
});
|
|
reviewRightBtn.addEventListener('click', () => {
|
|
reviewsWrapper.scrollBy({ left: 350, behavior: 'smooth' });
|
|
});
|
|
// Auto-hide scroll buttons when at edge
|
|
function checkScrollPosition() {
|
|
// For benefits cards
|
|
if (cardsWrapper.scrollLeft <= 10) {
|
|
scrollLeftBtn.style.opacity = '0.5';
|
|
scrollLeftBtn.style.cursor = 'default';
|
|
} else {
|
|
scrollLeftBtn.style.opacity = '1';
|
|
scrollLeftBtn.style.cursor = 'pointer';
|
|
}
|
|
if (cardsWrapper.scrollLeft >= cardsWrapper.scrollWidth - cardsWrapper.clientWidth - 10) {
|
|
scrollRightBtn.style.opacity = '0.5';
|
|
scrollRightBtn.style.cursor = 'default';
|
|
} else {
|
|
scrollRightBtn.style.opacity = '1';
|
|
scrollRightBtn.style.cursor = 'pointer';
|
|
}
|
|
// For reviews
|
|
if (reviewsWrapper.scrollLeft <= 10) {
|
|
reviewLeftBtn.style.opacity = '0.5';
|
|
reviewLeftBtn.style.cursor = 'default';
|
|
} else {
|
|
reviewLeftBtn.style.opacity = '1';
|
|
reviewLeftBtn.style.cursor = 'pointer';
|
|
}
|
|
if (reviewsWrapper.scrollLeft >= reviewsWrapper.scrollWidth - reviewsWrapper.clientWidth - 10) {
|
|
reviewRightBtn.style.opacity = '0.5';
|
|
reviewRightBtn.style.cursor = 'default';
|
|
} else {
|
|
reviewRightBtn.style.opacity = '1';
|
|
reviewRightBtn.style.cursor = 'pointer';
|
|
}
|
|
}
|
|
cardsWrapper.addEventListener('scroll', checkScrollPosition);
|
|
reviewsWrapper.addEventListener('scroll', checkScrollPosition);
|
|
window.addEventListener('resize', checkScrollPosition);
|
|
// Initial check
|
|
checkScrollPosition(); |