移动端导航栏展开时添加页面背景遮罩问题求助

核心思路 #

通过独立的遮罩层div实现，用CSS控制层级和显示状态，JS同步导航栏的展开/收起状态，确保遮罩只覆盖主内容、导航栏优先显示。

步骤1：添加遮罩层HTML结构 #

在页面body中，与nav-mobile同级的位置插入遮罩层：

<div id="overlay"></div>

步骤2：设置遮罩层CSS样式 #

保证遮罩层覆盖整个视口，层级介于主内容和导航栏之间：

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7); /* 半透明深色，可调整透明度 */
  z-index: 99; /* 层级低于导航栏、高于主内容 */
  display: none; /* 默认隐藏 */
  cursor: pointer; /* 点击遮罩可关闭导航 */
}

#nav-mobile {
  z-index: 100; /* 确保导航栏在遮罩上层 */
  /* 保留你原有导航栏的样式，补充关键属性 */
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  width: 0;
  overflow: hidden;
  transition: width 0.3s ease;
}

步骤3：修改JS逻辑控制遮罩 #

简化原有代码，同步控制导航栏和遮罩的显示/隐藏：

const navMobile = document.getElementById('nav-mobile');
const overlay = document.getElementById('overlay');
const menuOpenBtn = document.getElementById('menu-open');
const menuCloseBtn = document.getElementById('menu-close');

// 打开导航
function openNav() {
  navMobile.style.width = '250px';
  overlay.style.display = 'block';
  document.body.style.overflow = 'hidden'; // 禁止页面滚动
}

// 关闭导航
function closeNav() {
  navMobile.style.width = '0';
  overlay.style.display = 'none';
  document.body.style.overflow = ''; // 恢复页面滚动
}

// 绑定点击事件
menuOpenBtn.addEventListener('click', openNav);
menuCloseBtn.addEventListener('click', closeNav);
overlay.addEventListener('click', closeNav); // 点击遮罩关闭导航

你之前方法无效的原因 #

• 修改body背景色：导航栏是body的子元素，背景色会显示在导航栏下方，无法遮挡主内容；
• 使用filter：会对整个body（包括导航栏）生效，导致导航栏也被滤镜影响，达不到遮罩效果；
• 添加overlay失败：大概率是层级（z-index）设置错误，或遮罩层的定位、尺寸未覆盖整个视口。

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