jQUery --> 窗口调整大小后滚动到部分不能按预期工作

Question

调整窗口大小后，我的滚动功能无法按如下所述（描述显示我希望它如何工作）：

1. 我会调整窗口大小。

2. 在我单击给定菜单项时调整窗口大小后，窗口应滚动到...

3. 对应于该菜单项部分 offset().top-45 for max-width:480px（第一个断点）

4. 对应于该菜单项部分 offset().top-90px for min-width 481px（第二个断点）

https://jsfiddle.net/d1abevro/1/

它只对给定断点按预期工作，无需调整窗口大小（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 函数，但忘记添加时间，所以它会立即触发。

我对@9​​87654321@ 做了一些更改。让我知道它是否按您的预期工作