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

Question

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

我目前正在这样做:

<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并确保检查浏览器支持

A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.

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