Actualmente tengo un diseño de página web simple que se divide en 4 secciones (INICIO / ACERCA DE / HABILIDADES / CONTACTO).

Aquí está mi código JS que resalta una sección específica de la barra de navegación cuando se alcanza una cierta cantidad de píxeles durante el desplazamiento:

 let home = document.querySelector(".btn1") let about = document.querySelector(".btn2") let skills = document.querySelector(".btn3") let contact = document.querySelector(".btn4") function highlight(){ if(window.scrollY > 1) { home.classList.add("highlight") } if(window.scrollY > 550) { home.classList.remove("highlight") about.classList.add("highlight") } else{ about.classList.remove("highlight") } if(window.scrollY > 1210) { skills.classList.add("highlight") about.classList.remove("highlight") } else{ skills.classList.remove("highlight") } if(window.scrollY > 2050) { contact.classList.add("highlight") skills.classList.remove("highlight") } else{ contact.classList.remove("highlight") } } window.addEventListener("scroll", highlight);

Esto funciona bien en mi monitor de 24", pero se vuelve impreciso si la altura de la ventana de visualización aumenta, como en un monitor de 27".

¿Qué mejor manera puedo orientar cada sección de la página con desplazamiento?