吸頂效果在項目中并不少見， 通常做法是使用 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上的火狐， 各位可以看需求以及使用場景決定是否使用這個屬性。
