css实现导航栏折叠吸顶效果

最新推荐文章于 2024-08-11 11:09:15 发布

彤爱

最新推荐文章于 2024-08-11 11:09:15 发布

阅读量2.3k

点赞数 1

分类专栏： Css 前端文章标签： css 吸顶

本文链接：https://blog.csdn.net/RedLoVE0908/article/details/100743128

版权

本文介绍了如何使用CSS实现导航栏在页面滚动时的折叠吸顶效果。通过利用粘性定位属性，使得侧边栏的一级标题在滚动过程中能实现吸顶折叠，向上滚动时则展开。

摘要由CSDN通过智能技术生成

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