.text-nav-link { border-bottom: 3px solid #fff; transition: border-bottom-color 0.3s ease; } /* Active styling */ .text-nav-link.active { color: #DD3333 !important; border-bottom-color: #DD3333; } /* Hover styling on the link */ .ux-menu-link__link:hover { color: #DD3333 !important; } document.addEventListener('DOMContentLoaded', function() { // Select all scroll-to markers (anchors inside .scroll-to with a name attribute) const markers = document.querySelectorAll('.scroll-to a[name]'); // Cache all navigation links const navLinks = document.querySelectorAll('.ux-menu-link__link'); // This variable will store the currently active marker name let currentActive = null; // Create an Intersection Observer that triggers when a marker is at least 50% visible. const observerOptions = { threshold: 0.5 }; const observer = new IntersectionObserver((entries) => { // Filter for markers that are currently intersecting (in view) const visibleMarkers = entries.filter(entry => entry.isIntersecting); if (visibleMarkers.length > 0) { // Sort the visible markers by their distance from the top of the viewport. visibleMarkers.sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top); // Choose the marker closest to the top as the new active marker. const activeMarker = visibleMarkers[0].target; const newActive = activeMarker.getAttribute('name'); // Only update if the active marker has changed. if (newActive !== currentActive) { // Remove the active class from the nav container corresponding to the previous marker. navLinks.forEach(link => { const hash = new URL(link.href, document.baseURI).hash; if (hash === `#${currentActive}`) { link.closest('.text-nav-link').classList.remove('active'); } }); // Add the active class to the nav container corresponding to the new marker. navLinks.forEach(link => { const hash = new URL(link.href, document.baseURI).hash; if (hash === `#${newActive}`) { link.closest('.text-nav-link').classList.add('active'); } }); // Update the current active marker name. currentActive = newActive; } } // If no markers are visible, do nothing so the last active state remains. }, observerOptions); // Observe each scroll-to marker. markers.forEach(marker => observer.observe(marker)); });