Bootstrap 5 容器内元素.sticky-top吸顶功能失效问题

.sticky-top是Bootstrap封装的工具类，核心样式为position: sticky; top: 0; z-index: 1020;，sticky定位生效必须满足对应规则，你的代码违反了核心生效条件：

• 带.sticky-top的导航栏被嵌套在一个空的无样式<div>内，这个父容器没有设置额外高度，高度完全由内部导航栏撑开，和导航栏自身高度完全相等。sticky元素仅能在所属父容器的内容区域范围内实现粘附效果，父容器高度和导航栏一致时，导航栏没有可触发粘附的滚动空间，页面滚动时父容器整体移出视口，导航栏会同步移出，无法固定。
• 同类问题的其他常见诱因：sticky元素的任意祖先元素设置了overflow: hidden/overflow: auto/overflow: scroll属性，会直接打断sticky的定位上下文，导致粘附失效。

二选一即可：

• 移除导航栏外层多余的包裹<div>，将带.sticky-top的<nav>作为<body>的直接子元素，让sticky的定位上下文直接对应视口，即可正常固定在顶部。核心结构修正示例：

<body>
  <!-- 移除外层多余包裹div，导航直接作为body子元素 -->
  <nav class="navbar navbar-expand-lg bg-light sticky-top">
    <div class="container-fluid">
      <!-- 导航原有内部内容无需修改 -->
    </div>
  </nav>

  <main>
    <h1>Hello, world!</h1>
  </main>
  <!-- 原有JS、CSS引用保持不变 -->
</body>

• 若业务逻辑必须保留外层包裹div，需要给该div设置足够覆盖滚动区域的高度（例如设置min-height: 100vh），同时排查所有祖先元素，确保overflow属性为默认值visible。

排查技巧：若修改后仍失效，打开浏览器开发者工具，逐个检查导航栏所有祖先元素的计算样式，确认是否存在非visible的overflow属性、父级高度不足的问题。

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