粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。设置该属性的元素并不脱离文档流，仍然保留元素原本在文档流中的位置。

以前我们在实现诸如“固定导航菜单在屏幕顶部”的特效只能通过 Javascript 监听页面滚动事件，然后判断导航距离顶部的距离，为其动态添加position:fixed属性，这样实现一是比较麻烦，二是效果也不完美，滚动时容易出现抖动。

在 Css 3 中，我们可以使用 sticky 属性实现元素粘性定位，代码简单易懂，效果也更好，示例代码如下，重点就是红色代码部分。

<!DOCTYPE html>
<html>
<head>
	<title>demo</title>
	<style type="text/css">
		html,body{
			margin: 0;
			padding: 0;
		}
		.fixed{
			line-height: 40px;
			display: flex;
			position: -webkit-sticky;
			position: sticky;
			top: 0;
			left: 0;
		}
		.fixed li{
			flex: 1;
			text-align: center;
			background-color: #61b0ef; 
		}
		ul{
			padding: 0;
		}
		li{
			list-style: none;
		}
	</style>
</head>
<body>
	<ul>
		<li>第1行</li>
		<li>第2行</li>
		<li>第3行</li>
		<li>第4行</li>
		<li>第5行</li>
	</ul>
	<ul class="fixed">
		<li>tab1</li>
		<li>tab2</li>
		<li>tab3</li>
		<li>tab4</li>
	</ul>
	<ul>
		<li>第1行</li>
		<li>第2行</li>
		<li>第3行</li>
		<li>第4行</li>
		<li>第1行</li>
		<li>第2行</li>
		<li>第3行</li>
		<li>第4行</li>
		<li>第1行</li>
		<li>第2行</li>
		<li>第3行</li>
		<li>第4行</li>
		<li>第1行</li>
		<li>第2行</li>
		<li>第3行</li>
		<li>第4行</li>
		<li>第1行</li>
		<li>第2行</li>
		<li>第3行</li>
		<li>第4行</li>
		<li>第1行</li>
		<li>第2行</li>
		<li>第3行</li>
		<li>第4行</li>
		<li>第1行</li>
		<li>第2行</li>
		<li>第3行</li>
		<li>第4行</li>
		<li>第1行</li>
		<li>第2行</li>
		<li>第3行</li>
		<li>第4行</li>
		<li>第1行</li>
		<li>第2行</li>
		<li>第3行</li>
		<li>第4行</li>
		<li>第1行</li>
		<li>第2行</li>
		<li>第3行</li>
		<li>第4行</li>
		<li>第1行</li>
		<li>第2行</li>
		<li>第3行</li>
		<li>第4行</li>
	</ul>
</body>
</html>

(adsbygoogle = window.adsbygoogle || []).push({});