Saya sedang mengerjakan menu dengan kelas aktif. Masalahnya adalah saya ingin menghapus kelas aktif ketika saya menggulir kembali ke bagian paling atas halaman (jadi pada dasarnya di atas .spacer).

Apa yang saya dapatkan sejauh ini adalah ini:

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 untuk saran!

-1
David 7 Maret 2020, 22:21

1 menjawab

Jawaban Terbaik

Anda dapat mencapai kondisi penambahan 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>
0
sanriot 7 Maret 2020, 19:29