在下面的代码段中,div容器内部有一个粘性位置.它始终保持在容器内部,并粘在滚动面板的顶部.这与UITableViewiOS上的标题的行为相同,其中标题保持可见,直到下一个标题位于顶部.
在第二个片段中,除了容器具有overflow:hiddenCSS规则之外,一切都是相同的.这似乎可以防止position:sticky行为正常工作.
.parent {
position: relative;
background: #ccc;
width: 500px;
height: 150px;
overflow: auto;
margin-bottom: 20px;
}
.hidden-overflow {
overflow: hidden;
}
.sticky {
position: sticky;
background: #333;
text-align: center;
color: #fff;
top: 10px;
}<div class="parent">
<div>
<div class="sticky">
Hi, I am a sticky inside the container which contains the first paragraph.
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat sed metus et porttitor. Integer bibendum lacus …