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

代码现在正在工作，sory为麻烦，谢谢大家。祝你有美好的一天！

Answer 1

很高兴看到你弄明白了。您可以每隔250毫秒使用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");
    }
});

在锚点之间滚动页面时，为div添加或删除类

1 个答案: