崩溃并扩展到Scroll

Question

    // Schließen Button Hauptnavigation
    $('button#collapse-button').click(function () {
        $('nav#main-nav').toggleClass('closed');
    });
    
    
    $(window).on('scroll', function () {
        if ($(window).scrollTop() >= 500) {        
            $('nav#main-nav').addClass('closed');  
        }
    })

#header{
  height:500px;
  width:100%;
  background-color:darkslateblue;
}
#content{
  background:#ccc;
  height:900px;
  width:100%;
} 
#main-nav{
  width:200px;
  height:300px;
  background: #fff;
  display:inline-block;
  position:fixed;
  left:0;
  top:50px;
  transition:all 400ms ease;
}
.closed{
  left:-200px !important;
}
#collapse-button{
  float:right;
  width:20px;
  background:yellow;
}
.closed button{
  margin-right:-20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
header
<br><br>
<nav id="main-nav">
  <button id="collapse-button">X</button>
</nav>
</div>
<div id="content">
  content
</div>

大家好， 滚动500px后导航崩溃。 但是，如果我通过点击打开500px下的导航（在紫色标题div下）并尝试滚动，导航将再次崩溃。

点击行为是否高于滚动行为？也就是说，如果您通过单击滚动手动打开或关闭导航不再受影响..

sry for bad english

Answer 1

如果你想要一旦用户点击按钮隐藏/显示，那么滚动代码不应该执行，点击.off滚动事件。

$(window).off('scroll');

这将停止监控滚动更改。

＆＃13;

＆＃13;

// Schließen Button Hauptnavigation
    $('button#collapse-button').click(function () {
        $('nav#main-nav').toggleClass('closed');
        $(window).off('scroll');
    });
    
    
    $(window).on('scroll', function () {
        if ($(window).scrollTop() >= 500) {        
            $('nav#main-nav').addClass('closed');  
        }
    })

＆＃13;

#header{
  height:500px;
  width:100%;
  background-color:darkslateblue;
}
#content{
  background:#ccc;
  height:900px;
  width:100%;
} 
#main-nav{
  width:200px;
  height:300px;
  background: #fff;
  display:inline-block;
  position:fixed;
  left:0;
  top:50px;
  transition:all 400ms ease;
}
.closed{
  left:-200px !important;
}
#collapse-button{
  float:right;
  width:20px;
  background:yellow;
}
.closed button{
  margin-right:-20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
header
<br><br>
<nav id="main-nav">
  <button id="collapse-button">X</button>
</nav>
</div>
<div id="content">
  content
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用布尔标志指示是否单击了菜单：

    var openedByClick = false;
    // Schließen Button Hauptnavigation
    $('button#collapse-button').click(function () {
        $('nav#main-nav').toggleClass('closed');
        openedByClick = true;
    });


    $(window).on('scroll', function () {
        if ($(window).scrollTop() >= 500 && !openedByClick) {        
            $('nav#main-nav').addClass('closed');  
        }
    })

提示：这不是引入全局变量的最佳解决方案。