在錨點之間滾動頁面時添加或刪除類到div div

Question

我正在爲我的網站開發一個條件，以便當我將頁面滾動到錨點時，對應於該錨點的菜單項添加或刪除某個類。

我的問題是，我不能讓第一個項目菜單刪除類，當滾動到第二個錨點時，我認爲問題可能是在條件下，它可能不會按照我認爲的方式工作，所以我需要你的幫助

對於這個我使用jQuery和這裏是我到目前爲止有：

jQuery(document).ready(function($) { 

    var target1 = $("#thehotel").offset().top; 
    var target2 = $("#thecity").offset().top; 

    var interval = setInterval(function() { 

     // i am not sure if this setInterval method is causing the problem, yet i didn't find any other solution 

     if ($(window).scrollTop() >= target1 && $(window).scrollTop() < target2) { 
       $("#menu .item-109 a").addClass("myClass"); 
       $("#menu .item-111 a").removeClass("myClass"); 

     } 
     else if ($(window).scrollTop() >= target2) { 
      $("#menu.item-109 a").removeClass("myClass"); 
      $("#menu .item-111 a").addClass("myClass"); 
     } 



    }, 250);  
}); 

如果你發現我的英語不好的我道歉，這不是我的母語。 謝謝。

我發現我的錯誤，這是一個錯字！

這裏：

  if ($(window).scrollTop() >= target1 && $(window).scrollTop() < target2) { 
        $("#menu .item-109 a").addClass("myClass"); 
        $("#menu .item-111 a").removeClass("myClass"); 

      } 
      else if ($(window).scrollTop() >= target2) { 

//change this  $("#menu.item-109 a").removeClass("myClass"); 

//to this   $("#menu .item-109 a").removeClass("myClass"); 

       $("#menu .item-111 a").addClass("myClass"); 
      } 

代碼是現在的工作，索裏的麻煩，謝謝大家。祝你有美好的一天！

Answer 1

很高興看到你明白了。您可以每隔250毫秒使用setInterval()運行代碼，而不必每次滾動時都將窗口附加一個事件處理程序，以便您確切地知道何時進入和離開期望的邊界。

$(window).on('scroll', function(){ 

    if ($(window).scrollTop() >= target1 && $(window).scrollTop() < target2) { 

     $("#menu .item-109 a").addClass("myClass"); 
     $("#menu .item-111 a").removeClass("myClass"); 

    }else if ($(window).scrollTop() >= target2) { 

     //change this   
     $("#menu.item-109 a").removeClass("myClass"); 

     //to this    
     $("#menu .item-109 a").removeClass("myClass"); 

     $("#menu .item-111 a").addClass("myClass"); 
    } 
});