Question

在窗口调整大小后，我的滚动功能不起作用，如下所述（说明显示了我希望它如何工作）：

我会调整窗口大小。
单击给定菜单项后窗口调整大小后窗口应滚动到...
对应于菜单项section offset（）。top-45 for max-width：480px（first breakpoint）
对应于菜单项section offset（）。top-90px for min-width 481px（second breakpoint）

只有在没有窗口大小调整（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 - ＆gt;窗口调整大小后滚动到部分不能按预期方式工作

1 个答案: