javascript - 当用户滚动页面时删除事件类

Question

我正在尝试获得上述效果。当我单击单个菜单项时，事件类会正确更改。但是，我想在滚动页面时删除所有事件类。综上所述，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)


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

        return false;

  })


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

})

https://jsfiddle.net/m7pL4y2p/5/

Answer 1

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

$(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);

});

这里是 fiddle