用戶滾動頁面時刪除活動類

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').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);

});

這是小提琴

Answer 2

移除滾動條並使用滾輪方法。

希望下面的簡化代碼對您有所幫助。

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

嘗試將“窗口”更改為“文檔”，如下所示：

$(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。 事實是“動畫”是一個異步函數，因此您需要一個標志（automScr），該標志告訴窗口上滾動程序是否刪除該類。

因此，當您在菜單項上按下時，將atomScr設置為true，並在完成滾動動畫時將其設置為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");
             }

  })

})