移动端Navbar打开时隐藏页面元素并禁用滚动问题求解

修复方案 #

你需要修改以下几处代码即可实现预期效果： #

1. 修复页面滚动无法禁用的问题 #

你的JS代码中没有正确获取body元素，导致overflow: hidden设置不生效，替换原有JS代码如下：

var navList = document.getElementById("nav-lists");
// 正确获取body元素
var body = document.body;

function Show() {
  navList.classList.add("_Menus-show");
  body.style.overflow = "hidden";
  // 如果遇到导航打开时页面头部抖动的问题，可以额外加一行 body.style.position = "fixed"
}

function Hide() {
  navList.classList.remove("_Menus-show");
  body.style.overflow = "auto";
  // 对应上面的可选设置，这里加一行 body.style.position = "static"
}

2. 修复导航盖不住页面原有元素的问题 #

移动端导航菜单没有设置层级，导致被页面其他元素覆盖，在CSS的移动端媒体查询规则中，给导航菜单新增层级配置：

@media only screen and (max-width: 650px) {
  .container .navbar ul {
    /* 原有属性全部保留，新增下面这一行即可 */
    z-index: 9999;
  }
}

如果希望完全遮挡底部内容，还可以确认导航菜单的背景色为不透明：background: rgba(32, 21, 30, 1); #

3. 可选修复CSS语法错误 #

你当前把@media screen and (max-width:875px)的规则嵌套在了@media only screen and (max-width: 650px)内部，会导致875px的规则只有在屏幕宽度小于650px时才生效，不符合逻辑，建议把这个媒体查询移到外层。

内容的提问来源于stack exchange，提问作者JKR