Javascript 在croll上折叠和扩展

//Schließen按钮导航
$（“按钮#折叠按钮”）。单击（函数（）{
$（'nav#main nav'）。toggleClass（'closed'）；
});
$（窗口）.on（'scroll'，函数（）{
如果（$（窗口）.scrollTop（）>=500）{
$（'nav#main nav'）.addClass（'closed'）；
}
})

#标题{
高度：500px；
宽度：100%；
背景色：深蓝色；
}
#内容{
背景：#ccc；
高度：900px；
宽度：100%；
} 
#主导航{
宽度：200px；
高度：300px；
背景：#fff；
显示：内联块；
位置：固定；
左：0；
顶部：50px；
过渡：所有400ms缓解；
}
.关闭{
左：-200px！重要；
}
#折叠按钮{
浮动：对；
宽度：20px；
背景：黄色；
}
.关闭按钮{
右边距：-20px；
}

标题



X
内容

如果希望在用户单击按钮隐藏/显示后，在单击滚动事件中不执行滚动代码

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

这将停止监视滚动更改

//Schließen按钮导航
$（“按钮#折叠按钮”）。单击（函数（）{
$（'nav#main nav'）。toggleClass（'closed'）；
$（窗口）.off（'scroll'）；
});
$（窗口）.on（'scroll'，函数（）{
如果（$（窗口）.scrollTop（）>=500）{
$（'nav#main nav'）.addClass（'closed'）；
}
})

#标题{
高度：500px；
宽度：100%；
背景色：深蓝色；
}
#内容{
背景：#ccc；
高度：900px；
宽度：100%；
} 
#主导航{
宽度：200px；
高度：300px；
背景：#fff；
显示：内联块；
位置：固定；
左：0；
顶部：50px；
过渡：所有400ms缓解；
}
.关闭{
左：-200px！重要；
}
#折叠按钮{
浮动：对；
宽度：20px；
背景：黄色；
}
.关闭按钮{
右边距：-20px；
}

标题



X
内容

使用布尔标志指示是否按如下方式单击菜单：

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

---

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

您可以创建一个布尔变量，如果单击该按钮，将其设置为false。然后在滚动函数中，您可以检查该布尔值是否为false，如果为false，则不执行该函数-