5

我正在为我的网站开发一个条件，以便当我将页面滚动到锚点时，与该锚点对应的菜单项会添加或删除某个类。

我的问题是我无法使第一项菜单删除类，当滚动到第二个锚点时，我认为问题可能出在这种情况下，它可能无法按我想的方式工作，所以我需要你的帮助

为此，我正在使用 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");
             }

代码现在可以工作了，很抱歉，谢谢大家。祝你有美好的一天！

4

1 回答 1

3

很高兴看到你想通了。您可以将事件处理程序附加到窗口，而不是使用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");
    }
});
于 2013-05-20T19:23:12.193 回答