jquery - toggleClass when specific section is on screen -

this question has answer here:

• check if element visible after scrolling 38 answers

i making 1 big scroll page. , nav fixed positioned. want change color (from black white , vice versa) on nav when reaches specific sections on page. it's because of them white, , of them dark - want make contrast. made class in css should toggled. having difficulties using code. take @ it:

https://jsfiddle.net/lp27vuu4/

$(window).scroll(function (event) {      var scroll = $(window).scrolltop();          $('nav').toggleclass('light-mode',              //add 'light-mode' class when div position match or exceeds else remove 'light-mode' class.              scroll >= $('.section2').offset().top          );      });        //trigger scroll      $(window).scroll();//ensure if you're in current position when page refreshed

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <nav>      <h3>navigation links</h3>  </nav>  <section class="section1">      section 1  </section>  <section class="section2">      section 2  </section>  <section class="section3">      section 3  </section>

the conclusion:

my navigation default dark colored. when reach section dark want tell jquery add class .light-mode <nav>. when user goes off section, want go normal (so delete class). in solution has issues:

1. it seems not going original when user not on section.
2. the class added when user scrolls top bottom page. looks on .offset().top. want make more professional , universal. want add class when each section on screen not matter if bottom or top.

what want add class if scroll + offset of h3 greater offset of section , remove if scroll + offset of h3 greater offset of section + it's height.

check out this: https://jsfiddle.net/lp27vuu4/4/