javascript - 折叠和展开 onScroll

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>

大家好，向下滚动 500 像素后导航崩溃。但是，如果我通过单击打开 500px(在紫色 header-div 下)下的导航并尝试滚动，导航会再次崩溃。

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

对不起英语不好

Answer 1

如果您希望一旦用户点击了隐藏/显示按钮，滚动代码就不应执行，请点击.off。滚动事件。

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

这将停止监视滚动变化。

// 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');  
        }
    })

#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>