如何在移动菜单打开时禁用后台滚动？

我正在构建一个具有导航菜单的移动响应网站。 当我到达菜单底部时 – 如果我到达菜单底部继续滚动 – 它会在后台滚动页面。 我该如何禁用它？

到目前为止，这是我的jQuery代码：

// When the document is loaded... $(document).ready(function() { $('#mob-menu-btn').click(function(){ $('.sports').slideToggle("slow"); }) $('#sub-menu').click(function(){ $('.sports2').slideToggle("slow"); }) }); 

这是我的CSS：

  .list{ width: 100%; overflow: hidden; overflow-y: auto; top: -10%; overflow: hidden; overflow-y: auto; } .sports li{ list-style-image:none; list-style-type: none; border-bottom: 2px solid #eeeeee; margin-bottom: 0px; margin-left: 0px; padding-top: 15px; padding-bottom: 15px; padding-left: 10px; width:100%; font-family: arial; text-decoration: none; overflow: hidden; } 

Answer 1

菜单打开时，将位置固定在主体上。 关闭它时，删除该属性。 更好地使用添加/删除类。

  if($('#mob-menu').is(':visible')) { $('body').addClass("fixedPosition"); } else { $('body').removeClass("fixedPosition"); } 

  .fixedPosition { position: fixed; } 

Answer 2

而不是使用position: fixed （当你打开菜单时会导致跳回到顶部），你可以使用overflow: hidden 。 如果您在页面中的某个位置并打开菜单，则不会跳回到顶部。 （也许跳跃是我如何编写代码的问题，但它对我有帮助）。

Answer 3

这个问题的解决方法也略有不同。 您可以在按钮上添加onclick事件。 然后在你的身体上添加/删除课程（类似于之前的答案，但考虑到它之前的那个）。 这就是为我工作的东西，但是按下了按钮我有复选框，检查切换我的手机菜单。

将此添加到您的头部 ：

然后在CSS文件/部分中指定一个类：

 .lock-scroll { overflow: hidden; } 

这将是你的按钮：

 Click me!