把玩position sticky
2021-06-07 本文已影响0人
antlove
<!DOCTYPE html>
<html lang="en">
<head>
<title>position sticky</title>
<style>
body {margin: 0;}
.container {
width: 200px;
height: 200px;
border: 5px solid #000;
overflow : auto;
margin: auto;
}
.sub-container {padding-bottom: 50px;}
.sub-container > div {
height: 51px;
line-height: 50px;
border-bottom: 1px solid #ccc;
text-align: center;
}
.sub-container > div:first-child {
position: sticky;
top: 0;
font-weight: bold;
background-color:#eaeaea;
}
</style>
</head>
<body>
<div class="container">
<div class="sub-container">
<div>letters</div>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
</div>
<div class="sub-container">
<div>letters</div>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
</div>
<div class="sub-container">
<div>letters</div>
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
<div>G</div>
</div>
</div>
</body>
</html>
- 父级元素不能有任何
overflow:visible以外的overflow设置，否则没有粘滞效果。因为改变了滚动容器（即使没有出现滚动条）。因此，如果你的position:sticky无效，看看是不是某一个祖先元素设置了overflow:hidden，移除之即可。- 父级元素设置和粘性定位元素等高的固定的
height高度值，或者高度计算值和粘性定位元素高度一样，也没有粘滞效果。- 同一个父容器中的sticky元素，如果定位值相等，则会重叠；如果属于不同父元素，且这些父元素正好紧密相连，则会鸠占鹊巢，挤开原来的元素，形成依次占位的效果。
- sticky定位，不仅可以设置
top，基于滚动容器上边缘定位；还可以设置bottom，也就是相对底部粘滞。如果是水平滚动，也可以设置left和right值。
解释下以上2、3出现的现象
- 粘性定位中有一个“流盒”（flow box）的概念，指的是粘性定位元素最近的可滚动元素（overflow属性值不是visible的元素）的尺寸盒子，如果没有可滚动元素，则表示浏览器视窗盒子。
- 粘性定位中还有一个名叫“粘性约束矩形”的概念，表示的是粘性定位元素的包含块在文档流中呈现的矩形区域和流盒的四个边缘在应用粘性定位元素的left、top、right、bottom属性的偏移计算值后的新矩形的交集。
- 由于滚动的时候，流盒不变，而粘性定位元素的包含块跟着滚动，因此粘性约束矩形随着滚动的进行是实时变化的。
- 粘性定位元素不能超出粘性约束矩形的范围限制, 否则粘性效果失效
