Question

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

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

Answer 2

我最终得到了这个解决方案，这个解决方案并不是最佳的，但似乎可以正常工作

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

Answer 3

尝试更改＆＃34;窗口＆＃34;到＆＃34;文件＆＃34;就像在：

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

Answer 4

尝试更改此

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

这个你必须绑定滚动

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

Answer 5

嗯，所以它需要另一个aprox。事实是＆＃34; annimation＆＃34;是一个异步函数，所以你需要一个标志（automScr）告诉窗口滚动程序删除该类。

因此，当您按下菜单项时，您将atomScr设置为true，并在滚动动画完成时设置为false。

查看＆＃34; console.logs＆＃34;消息。

希望这有效！

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

  })

})

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

5 个答案: