使用一个滚动条的CSS固定列表标题

Question

我基本上想要一个带有固定标题的可滚动列表。唯一的事情是我希望滚动条扩展父级的整个高度，但只滚动导航项（保持徽标固定）。

我目前正在这样做：

<div className="home-page-nav">
   <div className="logo"></div>

   <div className="nav-items">
     <div className="nav-item"></div>
     ....
   </div>
</div>

和CSS：

.home-page-nav {
   overflow:auto;
   overflow-y:scroll;
}

.logo {
   position: fixed;
}

这是我要实现的目标：

Answer 1

您可以使用position: sticky;

下面是一个示例，我为溢出容器指定了高度，这样您就可以实际滚动内容了

您可以在https://developer.mozilla.org/en-US/docs/Web/CSS/position上阅读更多内容，并确保检查浏览器支持

  

粘性定位元素是其计算出的位置值为粘性的元素。它被视为相对定位，直到其包含的块在其流根（或在其中滚动的容器）内超过指定的阈值（例如，将top设置为auto以外的值），在该点处将其视为“卡住”，直到达到其包含块的相对边缘。

.home-page-nav {
  overflow: auto;
  overflow-y: scroll;
  height: 400px;
}

.logo {
  position: -webkit-sticky;
  position: sticky;
  background-color: green;
  top: 0;
}

.nav-item {
  height: 40px;
  margin-bottom: 10px;
  background-color: grey;
}

Document
<br/>
<br/>
<br/><br/>
<div class="home-page-nav">
  <div class="logo">I am logo</div>

  <div class="nav-items">
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
  </div>
</div>