粘性定位可以被认为是相对定位和固定定位的混合(即元素子再跨越特定阈值前为相对定位,之后为固定定位)例如:
.div{
position: sticky;
top: 10px;
}
在 视口滚动到元素 top 距离小于 10px 之前,元素为相对定位。之后,元素将固定在与顶部距离 10px 的位置,直到视口回滚到阈值以下
一、应用场景:
1、粘性定位常作用在导航和概览信息(标题,表头,操作栏,底部评论等)上
2、当用户在浏览详细信息时,也能看到信息的概览和做一些操作,给用户带来便捷的使用体验。
二、粘性定位的原理:
1、要理解粘性定位元素,首先我们要知道这几个名词概念:视口元素,容器元素,粘性约束元素 和 sticky 元素
- 视口元素:显示内容的区域。会设置宽,高。一般会设置
overflow:hidden
- 容器元素:离 sticky 元素最近的能滚动的祖先元素。
- 粘性约束元素:粘性定位的父元素。有时,也会出现粘性约束元素就是容器元素的情况。
- sticky 元素:设置了
position: sticky;
的元素。
2、滚动时,sticky 元素设置的 left, right, top, bottom 的值相对的是容器元素。当粘性约束元素滚出视口时,sticky 元素也会滚出视口。
三、粘性定位不生效的情况:
情况1: 未指定 left, right, top 和 bottom 中的任何一个值
设置 position: sticky相当于设置
position: relative。
要生效,要指定 left, right, top 或 bottom 中的任何一个值。
情况2: 垂直滚动时,粘性约束元素高度小于等于 sticky 元素高度
当粘性约束元素滚出视口时,sticky 元素也会滚出视口。粘性约束元素比 sticky 元素还小,sticky 元素没有显示固定定位状态的机会。
情况3: 粘性约束元素和容器元素之间存在 overflow: hidden 的元素
例如:
<div class="viewport">
<div class="container"> <!-- 容器元素 -->
<div style="overflow: hidden">
<div> <!-- 粘性约束元素 -->
<div class="stick-elem">...</div> <!-- sticky 元素 -->
...
</div>
</div>
</div>
</div>
要生效,要把 overflow: hidden
的元素移除。
最后感谢大家的阅读,欢迎留言补充
更多推荐
彻底理解粘性定位(position:sticky)
发布评论