折叠和展开 onScroll答案

【问题标题】：collapse and expand onScroll折叠和展开 onScroll
【发布时间】：2016-11-15 16:29:56
【问题描述】：

    // 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 下）下的导航并尝试滚动，导航会再次崩溃。

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

对不起英语不好

【问题讨论】：

您可以创建一个布尔变量并将其设置为 false 如果您单击按钮。然后在您的滚动功能中，您可以检查该布尔值是否为假，如果是，请不要执行该功能 - jsfiddle.net/95g81nr6

标签： javascript jquery html css scroll

【解决方案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>

【讨论】：

【解决方案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');  
        }
    })

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

【讨论】：