滚动页面到锚点之间时，向 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");
             }  

代码现在可以运行了，对于造成的困扰我很抱歉，谢谢大家。祝你们有美好的一天！

- BrunoMarques-BM

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

- Chris Traveis