我试图了解 css“粘性”的作用。
我可以让它粘在其父级的“顶部”，
但还没有到“底部”
我的测试代码是：
.block {
background: pink;
width: 50%;
height: 200px;
}
.move {
position: sticky;
bottom: 0;
}
1111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>
<div class="block">
AAAA
<div class="move">
BBBB
</div>
</div>
222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>
当我将“移动”设置为“顶部：0”时，它会粘在粉红色块的顶部，但是当设置为“底部：0”时，它似乎不再固定/粘性。
它工作正常，但你什么也看不到。我们看一下定义：
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 blockref
给块元素留出很大的边距以将其隐藏在屏幕上，然后开始缓慢滚动
.block {
background: pink;
width: 50%;
height: 200px;
margin-top:120vh;
}
.move {
position: sticky;
bottom: 0;
}
<div class="block">
AAAA
<div class="move">
BBBB
</div>
</div>
您会注意到，当您的元素显示BBB是重叠的AAA直到到达初始位置。这是使用时的粘滞行为bottom:0。所以我们的元素被保留position:relative当容器开始从顶部的屏幕出去时，它会粘在底部，直到到达相反的边缘（容器的顶部）。
完全相同的情况发生在top:0但在相反的方向：
.block {
background: pink;
width: 50%;
height: 200px;
margin-bottom:120vh;
}
.move {
position: sticky;
top: 0;
}
<div class="block">
AAAA
<div class="move">
BBBB
</div>
</div>
太粘了will not将元素定位到顶部或底部，但它将决定元素应如何粘贴，以便在容器开始移出屏幕时可见。
为了获得您想要的内容，您需要使用其他属性将元素放在底部并保持底部粘性。
这是一个示例，我使用 Flexbox 将元素放置在底部，并指定需要将其粘在底部。
.block {
background: pink;
width: 50%;
height: 200px;
margin-top:120vh;
display:flex;
flex-direction:column;
}
.move {
margin-top:auto;
position: sticky;
bottom: 0;
}
<div class="block">
AAAA
<div class="move">
BBBB
</div>
</div>
So position:sticky永远不会像我们那样定义元素的位置absolute or fixed但它将定义当存在滚动行为时元素将如何粘住。
这里有更多示例以更好地理解：
.block {
background: pink;
display:inline-flex;
vertical-align:top;
height: 200px;
max-width:100px;
flex-direction:column;
margin:100vh 0;
}
.e1 {
position: sticky;
top: 0;
}
.e2 {
margin-top:auto;
position: sticky;
top: 0;
}
.e3 {
position: sticky;
top: 20px;
}
.e4 {
position: sticky;
bottom: 0;
margin:auto;
}
.e5 {
position: sticky;
bottom: 0;
top:0;
margin:auto;
}
.e5 {
position: sticky;
bottom: 0;
}
<div class="block">
<div class="e1">Top sticky</div>
</div>
<div class="block">
<div class="e2">Top sticky at bottom (nothing will happen :( )</div>
</div>
<div class="block">
<div class="e3">Top sticky at 10px</div>
</div>
<div class="block">
<div class="e4">bottom sticky in the middle</div>
</div>
<div class="block">
<div class="e5">top/bottom sticky in the middle</div>
</div>
<div class="block">
<div class="e6">bottom sticky at the top (nothing will happen :( )</div>
</div>
粘性的另一个常见错误是忘记元素相对于其父元素的高度/宽度。如果元素的高度等于父级（包含块）的高度，那么从逻辑上讲，不会有粘性行为，因为我们已经在相对的边缘.
.block {
background: pink;
display:inline-flex;
vertical-align:top;
height: 200px;
max-width:100px;
flex-direction:column;
margin:100vh 0;
}
.block > div {
border:2px solid;
}
.e1 {
position: sticky;
top: 0;
}
<div class="block">
<div class="e1">Top sticky</div>
</div>
<div class="block">
<div class="e1" style="height:100%">I will not stick</div>
</div>
<div class="block">
<div class="e1" style="height:80%">I will stick a little ..</div>
</div>
<div class="block" style="height:auto">
<div class="e1">I will not stick too</div>
</div>
请注意最后一种情况，其中父级的高度设置为auto（默认值）因此它的高度将由其内容定义，这使得粘性元素与包含块具有相同的高度，并且不会发生任何事情，因为没有粘性行为的空间。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
