Javascript 当用户滚动页面时删除活动类

我试图得到上述效果。当我单击单个菜单项时，活动类将正确更改。但是，我想在滚动页面时删除所有活动类。总之，活动类只需在单击时更改，并在用户滚动页面时删除

$(document).ready(function() {
    $('li').click(function() {
        var $href= $(this).find('a').attr("href");
        var offset = $($href).offset().top;
                $(window).off('scroll');
        $('html, body').animate({
          scrollTop: offset + 'px'
        },500)


        $('li').find('a').removeClass('active');
        $(this).find('a').addClass('active')

        return false;

  })


      $(window).scroll(function() {
                    $('li').find('a').removeClass('active');
      })

})

尝试将“窗口”更改为“文档”，如下所示：

$(document).scroll(function() {
                $('li').find('a').removeClass('active');
  })

尝试将“窗口”更改为“文档”，如下所示：

$(document).scroll(function() {
                $('li').find('a').removeClass('active');
  })

试着改变这个

$(window).scroll(function() {
         $('ul > li > a').removeClass('active');
  })

为此，您必须绑定滚动条

 $(window).bind('mousewheel',function() {
    $('.active').removeClass('active');    
  });

试着改变这个

$(window).scroll(function() {
         $('ul > li > a').removeClass('active');
  })

为此，您必须绑定滚动条

 $(window).bind('mousewheel',function() {
    $('.active').removeClass('active');    
  });

---

嗯，所以它需要另一个aprox。事实上，“annimation”是一个异步函数，因此您需要一个标志（automScr），告诉窗口滚动程序是否删除该类

所以，当按下菜单项时，将atomScr设置为true，当滚动动画完成时，将atomScr设置为false

查看“console.logs”消息

希望这能奏效

$(document).ready(function() {
 var automScr=false;
$('li').click(function() {
            automScr=true;
    var $href= $(this).find('a').attr("href");
    var offset = $($href).offset().top;
            $(window).off('scroll');
    $('html, body').animate({
      scrollTop: offset + 'px'
    },500,null,function(){setTimeout(function(){automScr=false;},1)});


    $('li').find('a').removeClass('active');
    $(this).find('a').addClass('active')

    return false;

})


  $(document).scroll(function() {
     if (!automScr){
      console.log ("no automscr");
                $('li').find('a').removeClass('active');
      }else {
      console.log ("automscr");
             }

  })

})

---

嗯，所以它需要另一个aprox。事实上，“annimation”是一个异步函数，因此您需要一个标志（automScr），告诉窗口滚动程序是否删除该类

所以，当按下菜单项时，将atomScr设置为true，当滚动动画完成时，将atomScr设置为false

查看“console.logs”消息

希望这能奏效

$(document).ready(function() {
 var automScr=false;
$('li').click(function() {
            automScr=true;
    var $href= $(this).find('a').attr("href");
    var offset = $($href).offset().top;
            $(window).off('scroll');
    $('html, body').animate({
      scrollTop: offset + 'px'
    },500,null,function(){setTimeout(function(){automScr=false;},1)});


    $('li').find('a').removeClass('active');
    $(this).find('a').addClass('active')

    return false;

})


  $(document).scroll(function() {
     if (!automScr){
      console.log ("no automscr");
                $('li').find('a').removeClass('active');
      }else {
      console.log ("automscr");
             }

  })

})

---

移除滚动条并使用滚轮方法

我希望下面的简化代码对您有所帮助

$(document).ready(function() {
    $('li a').click(function(event) {
    var offset = $($(this).attr("href")).offset().top;
    $('html, body').animate({
      scrollTop: offset + 'px'
    },500);     
    $('li a').removeClass('active');
    $(this).addClass('active')
    event.preventDefault();
  });

  $(window).on('wheel', function(event){
    $('li a').removeClass('active');
  });
});

---

移除滚动条并使用滚轮方法

我希望下面的简化代码对您有所帮助

$(document).ready(function() {
    $('li a').click(function(event) {
    var offset = $($(this).attr("href")).offset().top;
    $('html, body').animate({
      scrollTop: offset + 'px'
    },500);     
    $('li a').removeClass('active');
    $(this).addClass('active')
    event.preventDefault();
  });

  $(window).on('wheel', function(event){
    $('li a').removeClass('active');
  });
});

---

我最终得到了这个不是最优的解决方案，但似乎是可行的

$(document).ready(function() {

    $('li').click(function() {
      var $href= $(this).find('a').attr("href");
      var offset = $($href).offset().top;
      $(window).off('scroll');

      $('html, body').animate({
         scrollTop: offset + 'px'
      },500).promise().then(function() {
         // Animation complete
         console.log('complete');
         // Need a timeout because this handler is fired before scrollTop reach the final position
         window.setTimeout(function() {
           $(window).scroll(removeAllActiveClasses);
         }, 100);
      });

      $('li').find('a').removeClass('active');
      $(this).find('a').addClass('active')

      return false;

   });

   function removeAllActiveClasses() {
     $('li').find('a').removeClass('active');
   }

   $(window).scroll(removeAllActiveClasses);

});

---

这是我最终得到的解决方案，它不是最优的，但似乎有效

$(document).ready(function() {

    $('li').click(function() {
      var $href= $(this).find('a').attr("href");
      var offset = $($href).offset().top;
      $(window).off('scroll');

      $('html, body').animate({
         scrollTop: offset + 'px'
      },500).promise().then(function() {
         // Animation complete
         console.log('complete');
         // Need a timeout because this handler is fired before scrollTop reach the final position
         window.setTimeout(function() {
           $(window).scroll(removeAllActiveClasses);
         }, 100);
      });

      $('li').find('a').removeClass('active');
      $(this).find('a').addClass('active')

      return false;

   });

   function removeAllActiveClasses() {
     $('li').find('a').removeClass('active');
   }

   $(window).scroll(removeAllActiveClasses);

});

---

以下是

如果我的判断正确，滚动到第二种颜色也会改变所选的菜单颜色？否，菜单的背景颜色必须相同-白色问题来自此说明

$（窗口）。关闭（“滚动”）。在单击手柄中返回false之前，您需要阅读滚动处理程序。如果我正确，滚动到第二种颜色将改变菜单颜色，也将改变所选的颜色？否，菜单的背景颜色必须相同-白色此问题来自此说明
$（窗口）。关闭（'scroll'）。在首次加载页面时，需要先读取滚动处理程序，然后在click handler中返回false。然后，当您再次单击某个项目并向下滚动时，当您第一次加载页面时，活动类将保留在元素liIt works。然后，当您再次单击某个项目并向下滚动时，活动类将保留在element Liu处。幸运的是，活动类将保留与上面示例中相同的内容。@hetious Edited check This不幸的是，活动类将保留与上面示例中相同的内容。@hetious Edited check This这正是我的意思。谢谢！！：）这正是我的意思。谢谢！！：）非常感谢你。就像我想得到的效果：）非常感谢。就像我想得到的效果：）