Exercise update menu on scroll for Google Site

Update-Nav.js

var ACTIVE_CLASS_NAME = "M9vuGd";

var navElms = document.getElementsByClassName("PsKE7e qV4dIc Qrrb5 YSH9J");

var STATES = [
	"Home",
	"About Us",
	"Artist Fund",
	"FAQ",
	"Contact Us"
	];

var navDict = {}

for (var i = navElms.length - 1; i >= 0; i--) {
	console.log(navElms[i].innerText)
	navDict[navElms[i].innerText] = navElms[i];
}

console.log(navDict);

// gemini generated function
function isInViewport(element, fullyInView = false) {
	const rect = element.getBoundingClientRect();
	const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
	const windowWidth = (window.innerWidth || document.documentElement.clientWidth);

	if (fullyInView) {
        // Check if fully visible
		return (
			rect.top >= 0 &&
			rect.left >= 0 &&
			rect.bottom <= windowHeight &&
			rect.right <= windowWidth
			);
	} else {
        // Check if partially visible
		return (
			rect.top < windowHeight &&
			rect.left < windowWidth &&
			rect.bottom > 0 &&
			rect.right > 0
			);
	}
}

var homeNavElm = navDict[STATES[0]];

var aboutUsId = "h.fg3kw6cf6e0g"
var aboutUsElm = document.getElementById(aboutUsId); 
var aboutUsNavElm = navDict[STATES[1]];

var aristFundId = "h.c7xro77ct0cd"
var aristFundElm = document.getElementById(aristFundId); 
var aristFundNavElm = navDict[STATES[2]];

var faqId = "h.pzsuhwthdosf"
var faqElm = document.getElementById(faqId); 
var faqNavElm = navDict[STATES[3]];

var contactUsId = "h.ytmpmfn43fs0"
var contactUsElm = document.getElementById(contactUsId); 
var contactUsNavElm = navDict[STATES[4]];

let lastKnownScrollPosition = 0;
let previousScrollPosition = 0;
let ticking = false;

function getActiveMenuItem(activeClassName = ACTIVE_CLASS_NAME) {
	return document.getElementsByClassName(activeClassName)[0].innerText
}

function removeActiveMenuItem(activeClassName = ACTIVE_CLASS_NAME) {
	let element = document.getElementsByClassName(activeClassName)[0];
	element.classList.remove(activeClassName);
	element.ariaCurrent = false;
	return element;	
}

function changeActiveMenuItem(element, activeClassName = ACTIVE_CLASS_NAME) {
	let oldElement = removeActiveMenuItem();
	element.classList.add(activeClassName);
	element.ariaCurrent = true;
}

function updateScrollDown(activeMenuItem, aboutUsInView, aristFundInView, faqInView, contactUsInView) {
	switch(activeMenuItem) {
	case STATES[0]:
		console.log("state 0")
		if(aboutUsInView) {
			changeActiveMenuItem(aboutUsNavElm)
		}
		break;
	case STATES[1]:
		console.log("state 1")
		if(aristFundInView) {
			changeActiveMenuItem(aristFundNavElm)
		}	
		break;
	case STATES[2]:
		console.log("state 2")
		if(faqInView) {
			changeActiveMenuItem(faqNavElm)
		}	
		break;
	case STATES[3]:
		console.log("state 3")
		if(contactUsInView) {
			changeActiveMenuItem(contactUsNavElm)
		}	
		break;
	case STATES[4]:
		console.log("state 4 - end of page do nothing")
		break;						
	default:
		console.error(`Unknown state: ${activeMenuItem}`)
	}
}

function updateScrollUp(activeMenuItem, aboutUsInView, aristFundInView, faqInView, contactUsInView) {
	switch(activeMenuItem) {
	case STATES[0]:
		console.log("state 0 - top of page do nothing")
		break;
	case STATES[1]:
		console.log("state 1")
		if(!aboutUsInView) {
			changeActiveMenuItem(homeNavElm)
		}
		break;
	case STATES[2]:
		console.log("state 2")
		if(aboutUsInView) {
			changeActiveMenuItem(aboutUsNavElm)
		}
		break;
	case STATES[3]:
		console.log("state 3")
		if(aristFundInView) {
			changeActiveMenuItem(aristFundNavElm)
		}
		break;
	case STATES[4]:
		console.log("state 4")
		if(faqInView) {
			changeActiveMenuItem(faqNavElm)
		}
		break;						
	default:
		console.error(`Unknown state: ${activeMenuItem}`)
	}	
}

function doSomething(scrollPos) {
	var activeMenuItem = getActiveMenuItem()
	console.log(activeMenuItem);
	var scrollingDown = scrollPos >= previousScrollPosition;
	console.log(scrollingDown);

	var aboutUsInView = isInViewport(aboutUsElm);
	console.log(`aboutUsElm = ${aboutUsInView}`);

	var aristFundInView = isInViewport(aristFundElm);
	console.log(`aristFundElm = ${aristFundInView}`);

	var faqInView = isInViewport(faqElm);
	console.log(`faqElm = ${faqInView}`);

	var contactUsInView = isInViewport(contactUsElm);
	console.log(`contactUsElm = ${contactUsInView}`);

	if(scrollingDown) {
		updateScrollDown(activeMenuItem, aboutUsInView, aristFundInView, faqInView, contactUsInView);
	} else {
		updateScrollUp(activeMenuItem, aboutUsInView, aristFundInView, faqInView, contactUsInView);
	}

	previousScrollPosition = lastKnownScrollPosition;
}

document.addEventListener("scroll", (event) => {
	lastKnownScrollPosition = window.scrollY;

	if (!ticking) {
		window.requestAnimationFrame(() => {
			doSomething(lastKnownScrollPosition);
			ticking = false;
		});

		ticking = true;
	}
});