吸顶效果在项目中并不少见， 通常做法是使用 javascript 监听 scroll，不过今天要说的这个方法，是使用css来完成吸顶效果。
关于 positoin ,CSS3新发布的一个属性 sticky，这个属性很有意思，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响，但是当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置，从而达到吸顶的效果，大家可以复制以下demo打开看看效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.title{
width: 100%;
position: sticky;
top:0px;
text-align: center;
background: #ccc;
color: #fff;
}
.title span{
padding: 8px 12px;
margin: 0;
}
.content{
height: 3000px;
padding: 20px;
}
</style>
</head>
<body>
<div>
<div class="title">
<span>topbar1</span>
<span>topbar2</span>
<span>topbar3</span>
</div>
<div class="content">
<p>假装这里是很多内容</p>
<p>假装这里是很多内容</p>
<p>假装这里是很多内容</p>
<p>假装这里是很多内容</p>
<p>假装这里是很多内容</p>
<p>假装这里是很多内容</p>
<p>假装这里是很多内容</p>
<p>假装这里是很多内容</p>
<p>假装这里是很多内容</p>
<p>假装这里是很多内容</p>
<p>假装这里是很多内容</p>
<p>假装这里是很多内容</p>
<p>假装这里是很多内容</p>
<p>假装这里是很多内容</p>
<p>假装这里是很多内容</p>
<p>假装这里是很多内容</p>
</div>
</div>
</body>
</html>
简直和 js 控制的一模一样！ 看起来是很美好了， 这么方便的属性，是不是马上就get了呢， 先别急，让我们看看兼容性，下图呢就是各大主流浏览器的支持性了
image.png
在 Can I use 的介绍里说到
保持元素定位为“fixed”或“relative”取决于它如何出现在视口。因此，当需要滚动时，元素会“卡住”。
然后往下看，兼容性有点 强差人意，IE完全不支持，edge支持率还好，高版本火狐以及谷歌都支持，以及iOS上的火狐， 各位可以看需求以及使用场景决定是否使用这个属性。
网友评论