He creado una página con diferentes colores de fondo. Lo que estoy tratando de lograr es cambiar los enlaces de navegación fijos de color en diferentes secciones. Como si hubiera dado una clase personalizada de luz y oscuridad respectivamente a las secciones. Y desea cambiar el color de los enlaces de navegación a medida que se desplazan las secciones.

Soy un novato en js y jquery, hágame saber cómo puedo lograr esto, estoy obteniendo ideas sobre cómo hacerlo, pero no puedo ejecutarlo (o escribirlo de manera adecuada)

Esto es lo que tengo todavía

 <div class="nav"> <ul> <li><a href="#" class="nav-link">Home</a></li> <li><a href="#" class="nav-link">About</a></li> <li><a href="#" class="nav-link">FAQ</a></li> <li><a href="#" class="nav-link">Contact Us</a></li> </ul> </div> <div class="one m-light"></div> <div class="two m-dark"></div> <div class="three m-light"></div> <div class="four m-dark"></div> <style> .nav{ position:fixed; } .nav li { display: inline-block; list-style: none; height: 60px; /* should be the same as line-height */ line-height: 60px; padding: 0 40px; } .nav-link { color: #000; text-decoration: none; mix-blend-mode:difference !important; } .one, .two, .three, .four{ height:100vh; width:100%; } .one{ background:#f1f1f1; } .two{ background:#050505; } .three{ background:#f4f4f4; } .four{ background:#030303; } </style> <script> $(document).ready(function(){ var scroll_pos = 0; var darkSection = $('.m-dark') $(document).scroll(function() { scroll_pos = $(this).scrollTop(); if(darkSection > scroll_pos) { $('.nav-link').css('color', '#000'); } else { $('.nav-link').css('color', '#fff'); } }); }); </script>