Javascript 菜单切换内容幻灯片多次

在我的页面的移动版上，我有一个无限滚动的机制用于内容提要。为了解决这个问题，我需要制作一个导航菜单，当用户滚动到某个偏移量时，它会显示并定位为fixed

我能够做到这一点，但遇到了切换菜单按钮和菜单内容的幻灯片切换出现的问题。菜单似乎前后滑动了多次。我附加了一个JSFIDLE链接来模拟我的问题

HTML:

---

代码中发生的情况是，每次调用show_菜单功能时，都会为菜单添加一个单击事件，每次滚动到该偏移量以上时，都会触发该功能。因此，滑动切换的触发次数与添加的单击事件的触发次数相同

要防止出现这种情况，您可以：

在show_菜单功能之外添加click事件。最好将它放在$document.ready或window.load中 或

使用或jQuery&function。像这样：

$("#menu").bind("click",function(){
        $("#contents").slideToggle();
});

并在调用show_menu之前使用unbind删除菜单按钮的所有绑定单击事件处理程序：

$("#menu").unbind("click");

更改您的：

$(window).scroll(function (event) {
     if($(window).scrollTop()  > 100){                
         show_menu();
     }
     else{
         hideAll();
     }  
 });

到

及

到

或

$("#menu").unbind("click");

$(window).scroll(function (event) {
     if($(window).scrollTop()  > 100){                
         show_menu();
     }
     else{
         hideAll();
     }  
 });

$(window).scroll(function (event) {
    if($(window).scrollTop()  > 100){   
        $("#menu").unbind("click");             
        show_menu();
    }
    else{
        hideAll();
    }  
});

$("#menu").click(function(){
       $("#contents").slideToggle();
   });

$("#menu").bind('click',function(){
       $("#contents").slideToggle();
   });

$("#menu").on('click',function(){
       $("#contents").slideToggle();
   });