我用 HTML CSS 和 BS3 制作的网站的移动导航非常基础。但我想在切换汉堡包按钮时禁用 body 其余部分的滚动。
我的问题是当它打开时,您无法滚动,这正是我想要的。但是当您关闭菜单时,它不起作用。
这里是一些 HTML:
<!-- mobile nav links-->
<div class="mob-div-nav">
<div class="row">
<div class="col-xs-12" style="height:100%;">
</div>
</div>
</div>
<!-- END Mobile Nav-->
这是 Js:
$("#hamburger").on("click", function (event){
$(".mob-div-nav").slideToggle(500);
function noscroll() {
window.scrollTo( 0, 0 );
}
// add listener to disable scroll
if ($(".mob-div-nav").css("display") == "block"){
window.addEventListener('scroll', noscroll);
} else if ($(".mob-div-nav").css("display") == "none") {
window.removeEventListener('scroll', noscroll);
}
});
最佳答案
在函数内部而不是外部使用 if 语句..你的代码应该是这样的
$(document).ready(function(){
// #hamburger click event
$("#hamburger").on("click", function (event){
$(".mob-div-nav").slideToggle(500);
}); // End of #hamburger click event
// window scroll event
$(window).on('scroll' , noscroll);
});
// functions here
// noscroll function
function noscroll() {
if ($(".mob-div-nav").is(':visible')){
window.scrollTo( 0, 0 );
}
}
解释:
$(document).ready(function(){
- 当文档准备就绪时 read Herewindow.addEventListener
是一个纯 javascript 而$(window).on('scroll'
是一个 jquery .. jQuery .on(); vs JavaScript .addEventListener();.is(':visible')
是一个 jquery 函数,检查元素是否可见,:hidden
如果元素隐藏,:checked
如果检查等等..你可以阅读关于 .is() here
关于javascript - 切换移动导航时如何防止滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47849327/