jQUery --> 在 window 调整大小后滚动到部分无法按预期工作

Question

在 window 调整大小后我的滚动功能 无法按照我下面描述的那样工作（说明显示了我希望它如何工作）:

我window调整大小。
window 调整大小后，当我单击给定的菜单项时，window 应该滚动到...
对应那个菜单项部分offset().top-45 for max-width:480px (第一个断点)
对应那个菜单项部分offset().top-90px for min-width 481px (second breakpoint)

在没有 window resize (onload) 的情况下，它只对给定的断点按预期工作。

  function displaymenu() {


   if ($(window).width() <= 480) {

              $('.c-main-menu ul').css({display: 'none'});      

           $(document).on("click", "a.c-main-menu__link", function(event){
            event.preventDefault();
               $('html,body').animate({
                      scrollTop: $($.attr(this, 'href')).offset().top-56
                  }, 800); 
                  $('.c-main-menu ul').slideToggle();  
            });    
              $('.c-nav .menu-trigger').click(function() {
                $('.c-nav .c-main-menu ul').slideToggle();
              });        

         } else {

       $('.c-main-menu ul').css({display: 'block'});         
            $(document).on("click", "a.c-main-menu__link", function(event){
                event.preventDefault();
                $('html,body').animate({
                    scrollTop: $($.attr(this, 'href')).offset().top-90
                }, 800);        
             });
                }
                }

Answer 1

这是因为每次调整大小后都会附加一个新事件。您应该终止旧事件并创建一个新事件，以防止与旧事件发生冲突。要获得这种方法，最好的方法是为您的事件添加一个命名空间，例如：

$(document).on("click.menuLinkEvent",".my_links", function(){});

在添加新事件之前，它会使用 unbind 方法杀死任何旧事件，并使用命名空间传递事件：

$(document).unbind("click.menuLinkEvent");

看起来你也理解正确，每次调整大小后都会附加事件，所以你添加了一个 setTimeout 函数，但忘记添加时间，所以它会立即触发。

我对 your fiddler 做了一些修改。让我知道它是否如您所愿

jQUery --> 在 window 调整大小后滚动到部分无法按预期工作

jQUery --> After window resize scroll to section does not work as expected

javascript

jquery

menu

window-resize