我试图了解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/>
[当我将“ move”设置为'top:0'时,它停留在粉红色块的顶部,但是当设置为'bottom:0'时,它似乎不再固定/发粘。
工作正常,但您什么也看不到。让我们看一下定义:
给块元素很大的空白以使其从屏幕上隐藏起来,然后开始缓慢滚动粘性放置的元素是其计算出的位置值为粘性的元素。在流根(或其滚动的容器)内将其[(例如,将top设置为auto以外的值),此时将其视为“卡住“,直到遇到其包含块的相对边缘 ref
.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>
所以很粘不会将元素放置在顶部或底部,但是它将决定如何将元素粘住以便在容器从屏幕上消失时可见。
为了获得所需的内容,您需要使用其他属性将元素放在底部并保持其底部粘性。这是一个示例,其中我使用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>
所以position:sticky
永远不会像我们对absolute
或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>
粘性的另一个常见错误是忘记元素相对于其父元素的高度/宽度。如果element的高度等于父级(包含块)的高度,则在逻辑上将不会发生任何粘滞行为,因为我们已经在相反的边缘。
.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
(默认值),因此其高度将由其内容定义,该内容使粘性元素与包含块的高度相同,并且不会发生任何事情,因为没有粘性行为的空间。
.block {
background: pink;
width: 50%;
}
.movetop {
position: sticky;
top: 0;
background: #ccc;
padding: 10px;
color: #ae81fe;
z-index: 1;
border: 1px solid #777;
}
.movebot {
background: #ccc;
padding: 10px;
color: #ae81fe;
position: -webkit-sticky;
position: sticky;
border: 1px solid #777;
}
.movebot {
bottom: 0
}
11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>
<div class="block">
<div class="movetop">
header
</div>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>
<div class="movebot">
footer
</div>
</div>
222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>
您可以在position:sticky
上找到有关gedd.ski/post/position-sticky的更多信息>希望对您有帮助。
和平。 🖖