我试图了解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/> 





当我将“移动”设置为“ top:0”时,它停留在粉红色块的顶部,但是当设置为“ bottom:0”时,它似乎不再固定/粘性。

#1 楼

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

粘性定位的元素是其计算出的位置值为粘性的元素。它被视为相对定位,直到其包含的块在其流根(或在其中滚动的容器)内超过指定的阈值(例如,将top设置为auto以外的值),在此点将其视为“卡住”,直到达到包含blockref的相对边缘

为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;
} 




因此,粘性不会将元素定位在顶部或底部,而是会决定元素应如何粘住,以便在容器开始移出屏幕时可见。为了获得所需的内容,您需要使用其他属性将元素放在底部并保持其底部粘性。
在此示例中,我使用flexbox将元素放置在底部,并指定需要它在底部发粘。



 <div class="block">
  AAAA
  <div class="move">
    BBBB
  </div>
</div> 

 .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:stickyabsolute所做的那样定义元素的位置,但是它将定义在发生滚动行为时元素如何粘住。

这里更多示例供您更好地理解:



 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;
} 




粘性的另一个常见错误是忘记了元素相对于其父元素的高度/宽度。如果element的高度等于父对象(包含块)的高度,则从逻辑上讲不会有任何粘滞行为,因为我们已经处在相反的边缘。

 <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>(默认值),因此其高度将由其内容定义,该值使粘滞元素的高度与包含块的高度相同,并且什么也不会发生,因为没有粘性行为的余地。

#2 楼

尝试以下代码:




 .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/> 





您可以在gedd.ski/post/position-sticky
上找到有关position:sticky的更多信息

希望对您有所帮助。

和平。 br