css实现导航栏折叠吸顶效果
1.效果需求
⼀个侧边栏，有⼀级标题和⼆级标题，需要在向下滚动的过程中⼀级标题逐步到达顶部吸顶折叠收起，向上滚动的过程中⼜逐步离开顶部展开。
2.css基本⽰例
本来打算采⽤Js的技术解决，但发现有点⿇烦，于是查到了可以使⽤ position: sticky粘性定位属性实现。
粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位
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</div>
<div class="content"></div>
<div class="egDiv">2</div>
<div class="content"></div>
<div class="egDiv">3</div>
<div class="content"></div>
<div class="egDiv">4</div>
<div class="content"></div>
<div class="egDiv">5</div>
<div class="content"></div> 3.实现
导航栏折叠吸顶效果实现
overflow-y: auto;
border:1px solid#dedede;
position: absolute;
margin: auto;
top:0;
left: 0;
right: 0;
bottom: 0;
}
.nav-title{
height: 40px;
text-align: center;
line-height: 40px;
color:#fff;
position: -webkit-sticky;
position: sticky;
text-align: center;
css固定定位
z-index: 2;
}
.nav-content{
color:#fff;
text-align: center;
z-index: 1;
height: 400px;
}
.title1{
background:red;
top:0;
}
.title2{
background:blue;
top:40px;
}
.title3{
background:green;
top:80px;
}
.title4{
background:purple;
z-index: 5;
top:120px;
}
//html
<div class="container">
<div class="nav-title title1">标题⼀</div>
<div class="nav-content content1">标题内容⼀</div> <div class="nav-title title2">标题⼆</div>
<div class="nav-content content2">标题内容⼆</div> <div class="nav-title title3">标题三</div>
<div class="nav-content content3">标题内容三</div> <div class="nav-title title4">标题四</div>
<div class="nav-content content4">标题内容四</div> </div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。