// Imports for managing animations and page navigation
import wixWindow from 'wix-window';
// Highlight the active section link
export function pageReady() {
const sectionIds = ['#section1', '#section2', '#section3']; // Add your section element IDs
const menuIds = ['#menuItem1', '#menuItem2', '#menuItem3']; // Add corresponding menu item IDs
const highlightActiveLink = () => {
const scrollPosition = wixWindow.scrollY;
sectionIds.forEach((sectionId, index) => {
const sectionElement = $w(sectionId);
sectionElement.getBoundingRect().then((rect) => {
if (
scrollPosition >= rect.top &&
scrollPosition <= rect.bottom
) {
$w(menuIds[index]).addClass('active');
} else {
$w(menuIds[index]).removeClass('active');
}
});
});
};
// Listen for scroll events to trigger the active link highlight
$w.onReady(() => {
wixWindow.onScroll((scrollInfo) => {
highlightActiveLink();
});
});
}
// Smooth scrolling for navigation menu
export function menuItem_click(event) {
const targetSection = event.target.data.sectionId; // 'data-section-id' is assigned in the menu items.
const sectionElement = $w(targetSection);
// Scroll smoothly to the target section
sectionElement.scrollTo()
.then(() => console.log(`Scrolled to ${targetSection}.`))
.catch((err) => console.error(err));
}
// Sticky Navigation
$w.onReady(() => {
wixWindow.onScroll((scrollInfo) => {
const header = $w('#header');
if (scrollInfo.scrollY > 50) {
header.addClass('sticky');
} else {
header.removeClass('sticky');
}
});
});
top of page
bottom of page