Remove menu class when section is not in viewport

Question

I'm working on menu with active class. Problem is that I would like to remove active class when I scroll back to the very top of the page (so basically above .spacer).

What I got so far is this:

HTML:

<div class="newMenu middle" id="newMenu">
  <ul class="">
    <li><a class="" href="#one">One</a></li> 
    <li><a class="" href="#two">Two</a></li>         
    <li><a class="" href="#three">Three</a></li>
  </ul>
</div>
<div class="spacer"</div>
<div class="content">
  <section id="one"></section>
  <section id="two"></section>
  <section id="three"></section>
</div>

CSS:

  $(window).scroll(function() {
var windscroll = $(window).scrollTop();
if (windscroll >= 100) {
  $('section').each(function(i) {
    if ($(this).position().top <= windscroll + 0) {
      $('li.active').removeClass('active');
      $('li').eq(i).addClass('active');
    }
  });

} else {

  $('nav li.active').removeClass('active');
  $('nav li:first').addClass('active');
}

}).scroll();

Looking forward for any suggestions!

Answer 1

You can achieve that add condition windscroll <= 0.

$(window).scroll(function() {
  var windscroll = $(window).scrollTop();
  if (windscroll >= 100) {
    $('section').each(function(i) {
      if ($(this).position().top <= windscroll + 0) {
        $('li.active').removeClass('active');
        $('li').eq(i).addClass('active');
      }
    });

  } else {
    $('nav li.active').removeClass('active');
    $('nav li:first').addClass('active');
  }

  if (windscroll <= 0) $('#newMenu li.active').removeClass('active');


}).scroll();

.box {
  width: 100vw;
  height: 500vh;
}

#newMenu {
  position: fixed;
  top: 0;
}

.active {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="newMenu middle" id="newMenu">
  <ul class="">
    <li><a class="" href="#one">One</a></li>
    <li><a class="" href="#two">Two</a></li>
    <li><a class="" href="#three">Three</a></li>
  </ul>
</div>
<div class="spacer"></div>
<div class="content">
  <section id="one"></section>
  <section id="two"></section>
  <section id="three"></section>
</div>

<div class="box">

</div>