当部分不在视口中时删除菜单 class

Question

我正在处理菜单 class。问题是当我滚动回到页面的最顶部（所以基本上在 .spacer 之上）时，我想删除 active class。

到目前为止我得到的是：

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();

期待任何建议！

Answer 1

您可以实现该添加条件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>

当部分不在视口中时删除菜单 class

Remove menu class when section is not in viewport

javascript

css

jquery

viewport