为了账号安全,请及时绑定邮箱和手机立即绑定

为什么带有position:sticky的元素不会停留在父对象的底部?

/ 猿问

为什么带有position:sticky的元素不会停留在父对象的底部?

哈士奇WWW 2019-10-12 13:44:48

我试图了解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”时,它似乎不再固定/发粘。



查看完整描述

2 回答

?
郎朗坤

一切正常,但您什么也看不到。让我们看一下定义:


粘性放置的元素是其计算的位置值为粘性的元素。它处理为相对定位,直到它的包含块超过指定阈值(例如,设置顶部到比自动其他)其流动根内(或容器它内滚动),在该点它被视为“卡住”,直到满足所述其包含块参考的相对边缘


给block元素留一个很大的空白以将其从屏幕上隐藏起来,然后开始缓慢滚动

.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(默认值),因此其高度将由其内容定义,该值使粘滞元素的高度与包含块的高度相同,并且不会发生任何事情,因为将没有空间对于粘性行为。



查看完整回答
反对 回复 2019-10-12
?
繁花如伊

尝试以下代码:


.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上找到更多信息。


希望对您有所帮助。


查看完整回答
反对 回复 2019-10-12

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信