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

Question

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

到目前为止我得到的是：

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>