胖蔡说技术今天遇到一个css的问题：之前通过sticky设置的吸顶效果突然不见了，经过一番查证后发现这是因为在其父布局中添加了overflow属性导致sticky失效了。接下来，我们来了解一下sticky的设置、失效原因以及如何解决sticky失效。
Sticky吸顶
Sticky是一个比较会常用到的功能，其实现也比较简单，我们只需要给一个容器设置成”position: sticky;”，指定系统条件即可实现一个简易的吸顶效果，实现代码如下：
// css 代码
<style>
.sticky {
width: 900px;
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 0px;
height: 46px;
line-height: 46px;
box-shadow: 5px 2px 2px #f3f3f3;
background-color: aqua;
color: white;
font-weight: bold;
}
.content {
width: 100%;
height: 800px;
}
</style>
// html代码
<body>
<div class="main">
<div class="sticky">这是一个吸顶控件</div>
<div class="content">
主题内容
</div>
</div>
</body>
什么会导致Sticky不生效？
sticky不生效总结可以大致分为如下三类问题：
- 父元素或祖先元素中设置了
overflow:hidden;overflow-x: hidden; overflow-y: - 没有设置定位属性：
top/bottom/left/right属性进行粘性定位 - 父元素的高度不能低于
sticky元素的高度
如何解决Sticky不生效问题
一般出现overflow与sticky冲突的问题，我们通常是通过监听页面容器的滑动判断滑动高度，并通过生成克隆层实现顶部粘粘，达到指定效果，统一的当页面滑动下来的时候再将克隆层删除实现页面的下滑。
/* 粘顶导航栏 */
/* 克隆的是class="sticky"的一个navbar */
var pscroll = 0; //滚动高度
var iscroll = 0; //循环因子
$(window).scroll(function(){
pscroll = $(this).scrollTop();
if(0<pscroll && iscroll === 0){
var stickyClone = $(".sticky").clone(true).removeClass("sticky").addClass("stickyClone").css("top","0").css("visibility","hidden");
$(".sticky").before(stickyClone);
$(".sticky").css("z-index","1020");
$(".sticky").css("position","fixed");
$(".sticky").css("top","0");
$(".sticky").css("right","0");
$(".sticky").css("left","0");
iscroll = 1;
}
if(0<pscroll){
//下滚
}else{
$(".sticky").css("position","relative"); //可设为默认"static"
$(".stickyClone").remove();
iscroll = 0;
}
});
