No se si he entendido bien lo que quieres hacer, pero creo que quieres hacer que el color de tu menú <nav></nav>
cambie en base al color de fondo que tienes aplicado en ese momento. No se si esto se puede hacer, pero te dejo con una posible solución:
<script>
//Activamos un addEventListener de Scroll en el contenedor "main"
let main = document.querySelector(".main");
main.addEventListener("scroll",()=>{
//En scrollTop estoy obteniendo la posición de la página en al cual me situo
//console.log(main.scrollTop); para verlo más claro
scrollDiff(main.scrollTop);
})
function scrollDiff(scrollPos){
//Anchors de tu navBar
let navbar = document.querySelectorAll(".navbar ul li a");
//Borde de el listado
let navbarBorder = document.querySelector(".navbar ul");
//Recorremos el nodeList de todos los elementos del menú
navbar.forEach(attribute=>{
if(scrollPos <= 855){
//Aquí tienes el fondo verde
attribute.style.color = "black";
navbarBorder.style.borderColor = "black";
}else if(scrollPos > 856 && scrollPos <=1787){
//Aquí tienes el fondo blanco
attribute.style.color = "green";
navbarBorder.style.borderColor = "green";
}else if(scrollPos > 1789 && scrollPos <= 2725){
//Aquí tienes el fondo azul
attribute.style.color = "aquamarine";
navbarBorder.style.borderColor = "aquamarine";
}else if(scrollPos >2726 && scrollPos <= 2799){
//Aquí tienes el fondo negro
attribute.style.color = "white";
navbarBorder.style.borderColor = "white";
}else{
//Vuelve a un color por defecto
attribute.style.color = "black";
navbarBorder.style.borderColor = "black";
}
});
}
</script>
Mediante JavaScript puedes determinar la posición en la que te encuentras de la página por el scroll, puedes hacer que si te encuentras en ciertas posiciones le apliques un color o otro al menú, aunque esta manera no es demasiado buena, si quieres hacer la página responsive este método no es el más adecuado.
IntersectionObserver
.