如何实现滚动时固定在顶部的凹形Header？

我懂你想要的效果：固定在顶部的凹形弧形Header，同时下方的列表能独立滚动。你原来的代码问题在于没给Header设置固定定位，导致滚动列表时整个容器都会跟着移动。下面是修改后的实现方案：

修改后的完整代码 #

* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
} 
li { 
  list-style-type: none; 
} 
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 256px;
  background: #2a6a8d;
  padding: 16px 0;
  z-index: 10;
}
h1 { 
  text-align: center; 
  color: white; 
} 
.container { 
  width: 256px; 
  font-family: Arial Narrow;
  padding-top: 60px; /* 适配Header高度，避免内容被遮挡 */
}
.content { 
  display: block; 
  margin: auto; 
  padding: 16px; 
  background-color: #e7eeff; 
  border-top-right-radius: 30px; 
  border-top-left-radius: 30px; 
  width: 100%; 
  max-height: calc(100vh - 60px); /* 让内容区域占据剩余视口高度 */
  overflow-y: auto; /* 开启内容滚动 */
}

<div class="container">
  <div class="header">
    <h1>Title</h1>
  </div>
  <ul class="content">
    <li>- Content 1</li>
    <li>- Content 2</li>
    <li>- Content 3</li>
    <li>- Content 4</li>
    <li>- Content 5</li>
    <li>- Content 6</li>
    <li>- Content 7</li>
    <li>- Content 8</li>
    <li>- Content 9</li>
    <li>- Content 10</li>
    <li>- Content 11</li>
    <li>- Content 12</li>
    <li>- Content 13</li>
  </ul>
</div>

关键修改说明 #

1. 独立Header容器并固定定位：新增.header容器，给它设置position: fixed固定在视口顶部，同时加z-index确保它在内容上方，不会被滚动的列表覆盖。
2. 调整内容位置：给.container加padding-top，让内容避开固定的Header，具体数值可以根据Header的实际高度调整。
3. 开启内容滚动：给.content设置max-height（基于视口高度减去Header高度）和overflow-y: auto，这样列表内容超出高度时会自动出现滚动条，Header则始终固定在顶部。
4. 保留凹形效果：原有的border-top-left/right-radius属性完全保留，确保内容区域顶部的凹形弧形样式不变。

这样修改后，滚动列表内容时Header会一直固定在顶部，同时完美保留你想要的凹形弧形效果。

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