修复了可滚动 div 内的导航

如何解决修复了可滚动 div 内的导航

我想要一个固定在可滚动 div 内的导航栏，而不是在整个窗口的顶部。在下面的示例中，我希望我的导航栏出现在红色区域并在滚动时保持固定。

#containerDiv {
  padding-top: 60px;
}

#scrollDiv {
  overflow-y: scroll;
  height: 100px;
}

#scrollableContentDiv {
  background-color: red;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

<div class="container" id="containerDiv">
  <p>Outside scrollable</p>
  <p>Outside scrollable</p>
  <p>Outside scrollable</p>
  <div id="scrollDiv" tabindex="0">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
      </div>
    </nav>
    <div id="scrollableContentDiv">
      <p>Inside scrollable</p>
      <p>Inside scrollable</p>
      <p>Inside scrollable</p>
      <p>Inside scrollable</p>
      <p>Inside scrollable</p>
      <p>Inside scrollable</p>
    </div>
  </div>
  <p>Outside scrollable</p>
  <p>Outside scrollable</p>
  <p>Outside scrollable</p>
</div>

有可能吗？

感谢您的帮助。

解决方法

固定在红色框内。使用 .sticky-top (position:sticky;)

问题是“sticky”是一个实验性的 API，不应该在生产代码中使用。但它在我测试过的 Chrome 中运行良好。此外，具有“粘性”的元素不应该是唯一的一个孩子。它必须有兄弟（或姐妹）。

请注意，根据规范，sticky 不能在带有溢出的元素内工作：隐藏或自动。

#containerDiv {
  padding-top: 60px;
}

#scrollDiv {
  overflow-y: scroll;
  height: 100px;
}

#scrollableContentDiv {
  background-color: red;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

<div class="container" id="containerDiv">
  <p>Outside scrollable</p>
  <p>Outside scrollable</p>
  <p>Outside scrollable</p>
  <div id="scrollDiv" tabindex="0">
    
    <div id="scrollableContentDiv">
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
       <div class="container-fluid">
         <a class="navbar-brand" href="#">Navbar</a>
       </div>
      </nav>
      <p>Inside scrollable</p>
      <p>Inside scrollable</p>
      <p>Inside scrollable</p>
      <p>Inside scrollable</p>
      <p>Inside scrollable</p>
      <p>Inside scrollable</p>
    </div>
  </div>
  <p>Outside scrollable</p>
  <p>Outside scrollable</p>
  <p>Outside scrollable</p>
</div>