Bootstrap navbar-scrolled状态下移动端菜单模糊、链接无法点击问题求助

问题表现 #

• 初始状态下移动端菜单运行正常
• 页面滚动触发sticky头部后，菜单变为模糊灰色，内部链接无法点击
• 页面滚动时导航栏会自动新增navbar-active类，触发样式异常

根因定位 #

相关异常触发CSS如下：

.site-navbar.navbar-scrolled {
  box-shadow: 0 2px 22px 0 rgba(0, 0, 0, 0.06);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  position: fixed;
  width: 100%;
  z-index: 1030;
  top: 0;
}

异常原因分为两点：

1. 导航栏滚动后添加的毛玻璃滤镜backdrop-filter: blur(5px)，会对下层的移动端菜单产生模糊效果，叠加半透阴影后呈现灰化状态
2. sticky导航的z-index设置为1030，若移动端菜单的层级低于该数值，会被导航栏完全遮挡，导致内部链接无法触发点击事件

修复方案 #

方案1：直接移除毛玻璃效果（最简方案） #

删除上述CSS中的两行滤镜规则即可直接消除模糊问题：

.site-navbar.navbar-scrolled {
  box-shadow: 0 2px 22px 0 rgba(0, 0, 0, 0.06);
  /* 移除以下两行规则 */
  /* -webkit-backdrop-filter: blur(5px); */
  /* backdrop-filter: blur(5px); */
  position: fixed;
  width: 100%;
  z-index: 1030;
  top: 0;
}

方案2：保留桌面端毛玻璃效果，移动端单独适配 #

通过媒体查询限制毛玻璃效果仅在桌面端生效，避免影响移动端菜单：

.site-navbar.navbar-scrolled {
  box-shadow: 0 2px 22px 0 rgba(0, 0, 0, 0.06);
  position: fixed;
  width: 100%;
  z-index: 1030;
  top: 0;
}
/* 桌面端单独添加毛玻璃效果，992px可根据实际断点调整 */
@media (min-width: 992px) {
  .site-navbar.navbar-scrolled {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }
}

修复点击失效问题 #

调整移动端菜单的层级，确保其高于sticky导航的z-index值：

/* 请将类名替换为实际使用的移动端菜单类名 */
.mobile-menu {
  z-index: 1040;
}

如果navbar-active类额外添加了禁用交互的规则，新增样式覆盖即可：

.site-navbar.navbar-active {
  pointer-events: auto;
}

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