我使用HTML CSS和BS3制作的网站的移动导航是非常基本的。但是当我切换汉堡包按钮时,我想要禁用身体其他部分的滚动。
我的问题是,当它打开时,你不能滚动,这就是我想要的。但是当您关闭菜单时,它不起作用。
下面是一些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);
}
});
答案 0 :(得分:0)
使用函数内部的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 Here window.addEventListener
是纯粹的javascript,$(window).on('scroll'
是jquery .. jQuery .on(); vs JavaScript .addEventListener(); .is(':visible')
是一个jquery函数检查元素是否可见,:hidden
如果元素被隐藏,:checked
如果被选中等等......你可以阅读{{3} }