добавить или удалить класс в 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

Рад видеть, что вы поняли это. Вместо использования setInterval() для запуска вашего кода каждые 250 мс вы можете присоединить обработчик событий к окну, который будет запускать ваш код при каждом прокрутке, позволяя вам точно знать, когда вы входите и оставляете желаемые границы.

$(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"); 
    } 
});