1.效果需求
一个侧边栏,有一级标题和二级标题,需要在向下滚动的过程中一级标题逐步到达顶部吸顶折叠收起,向上滚动的过程中又逐步离开顶部展开。
2.css基本示例
本来打算采用Js的技术解决,但发现有点麻烦,于是查到了可以使用 position: sticky
粘性定位属性实现。
粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位
//css
.container{
width:200px;
height: 300px;
overflow-y:auto;
border:1px solid#dedede;
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
.egDiv{
position: -webkit-sticky;
position: sticky;
top:0px;
height:25px;
background:grey;
// margin-bottom:200px;
color:#fff;
}
.content{
height:400px;
border-bottom:1px solid#dedede;
}
//html
<div class="egDiv">1<