JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <h3>navigation links</h3>
</nav>
<section class="section1">
    section 1
</section>
<section class="section2">
    section 2
</section>
<section class="section3">
    section 3
</section>

CSS

body {
  margin: 0px;
  padding: 0px;
}

nav {
  width: 100%;
  position: fixed;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.light-mode {
    color: #fff;
}

.section1 {
   width: 100%;
   height: 400px;
   background-color: #fff;
   color: #000;
   padding: 100px;
}

.section2 {
   width: 100%;
   height: 400px;
   background-color: #000;
   color: #fff;
   padding: 100px;
}

.section3 {
   width: 100%;
   height: 400px;
   background-color: #fff;
   color: #000;
   padding: 100px;
}

JavaScript

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
        $('nav').toggleClass('light-mode',
            //add 'light-mode' class when div position match or exceeds else remove the 'light-mode' class.
            scroll >= $('.section2').offset().top
        );
    });

    //trigger the scroll
    $(window).scroll();//ensure if you're in current position when page is refreshed