我正在尝试修复的移动导航问题(JS 或 CSS)

Question

我目前在创建的移动导航中遇到问题。这是一个简单的汉堡图标，当您单击它时，它会打开一个全屏菜单。问题是我试图在覆盖层可见时禁用滚动。现在我想我可以通过添加来实现这一点;

$('body').bind('touchmove', function(e){e.preventDefault()});

但这不会在点击事件中切换。 我将如何实现它，以便它切换？当再次单击时，应该可以再次滚动。完整剧本;

$(document).ready(function () {
$(".icon").click(function () {
$('body').bind('touchmove', function(e){e.preventDefault()});
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
}); 
});

Answer 1

非常有用的链接：

如何使用 jQuery 以编程方式禁用页面滚动 此代码有效

$(document).ready(function(){
$("button").click(function(){
$('html, body').css({
overflow: 'hidden',
height: '100%'
});
$("p").toggleClass("main");
});
$('html, body').css({
overflow: 'auto',
height: 'auto'});  
});

Answer 2

$(document).ready(function () {
$(".icon").click(function () {
$('body').bind('touchmove', function(e){e.preventDefault();});
$(".mobilenav").fadeToggle(500);
$(".top-menu").toggleClass("top-animate");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
}); 
$('body').unbind('touchmove'); 
});

你能试试这个吗？