我正在尝试用CSS重新创建iOS 16天气应用程序的滚动效果。这就是说，我需要的块与粘性头，重叠在顶部。position: sticky本身会在下一个header位于顶部时将最后一个header推出。有没有一种方法可以防止这种行为，并有块重叠？（最好只使用CSS）
为了更清楚地说明我想实现的目标，下面是我正在谈论的天气应用程序。正如你所看到的，下一个块与前一个块的标题重叠（当它消失时），而不是将它推出来。
我通常使用position: sticky来做这类事情，它将前一个块推出来，而不是重叠它。
section {
padding-bottom: 10px;
}
.content {
height: 300px;
width: 300px;
background-color: lightblue;
}
.header {
height: 40px;
width: 300px;
background-color: coral;
position: sticky;
top: 0;
}<section>
<div class="header">
Title 1
</div>
<div class="content" />
</section>
<section>
<div class="header">
Title 2
</div>
<div class="content" />
</section>
<section>
<div class="header">
Title 3
</div>
<div class="content" />
</section>
2条答案
按热度按时间xwmevbvl1#
你可以在粘性标题中添加一个负的底部边距，给予它更多的空间来保持粘性，这将模拟你想要的重叠。别忘了在下一节中添加相同数量的保证金来进行修正。
des4xlb02#
一种方法是稍微改变一下你的结构。在
section元素之外取.header元素将直接获得您想要的效果。尽管它修改了你想要的样式。