在锚点之间滚动页面时,为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");
             }  

代码现在正在工作,sory为麻烦,谢谢大家.祝你有美好的一天!

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