I have created a page with different background colors. What I'm trying to achieve is to change color fixed nav links on different sections. Like I've given custom class of light and dark respectively to the sections. And want to change color of nav links as the sections scrolls.

I'm a newbie to js and jquery, please let me know how can i achive this, I'm getting ideas to how to do, but i'm not able to execute it (or write it in a proper way)

This is what I have yet

<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>