引导导航栏滚动 - 链接不可用

Posted 2023-05-08

【中文标题】引导导航栏滚动 - 链接不可用

【英文标题】：Bootstrap navbar-scrolled - Links not available

【发布时间】：2022-01-03 18:50:27

【问题描述】：

我的移动菜单有问题。它运行良好，但是当我滚动（带有粘性标题）时，菜单将变成模糊的灰色，并且链接不再可用。我找不到问题。也许有人可以帮助我。

我的课堂上有一个“导航栏激活”，它会停用或使其模糊移动菜单。

.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;

【问题讨论】：

欢迎来到 Stack Overflow。调试实时站点并不是真正的事情。这个问题应该是将来对其他人也有用的东西。 （谁知道那个网站会发生什么。）如果你能做一个最小的演示，你将有更好的机会获得帮助。

嗨，谢谢。是的，我明白这一点。演示我无法提供。但我补充说.. 它是一个标准类（将在您开始滚动时添加），名称为 navbar-active。

尝试将 z-index 更改为 1050，因此它会高于 body-backdrop。

这行得通。非常感谢！

【参考方案1】：

body-backdrop 的 z-index 为 1040。 因此，将菜单更改为 1050 即可解决问题。

.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: 1050;
  top: 0;