实例代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
font-size:28px;
}
div{
text-align:center;
background-color:#f1f1f1;
}
ul{
padding:0;
margin:0;
list-style-type:none;
overflow:hidden;
background-color:#333;
position:sticky; /*顶部粘性*/
top:0;
}
li{
float:left;
}
li a{
color:white;
padding:14px 16px;
display:block;
text-decoration:none;
text-align:center;
}
li a:hover{
background-color:black;
}
.home{
background-color:green;
}
</style>
</head>
<body>
<div>
<h1>向下滚动</h1>
<p>请向下滚动以查看粘性效果。</p>
</div>
<ul>
<li><a class="home" href="https://www.dwoke.com">Home</a></li>
<li><a href="https://www.dwoke.com">News</a></li>
<li><a href="https://www.dwoke.com">Contact</a></li>
</ul>
<h1>粘性导航栏实例</h1>
<p>如果导航栏到了滚动位置，它会<strong>粘</strong>到顶部。</p>
<p><b>注释：</b>Internet Explorer不支持粘性定位并且Safari 需要 -webkit- 前缀。</p>
<p> Some text to enable scrolling . Lorem ipsum dolor sit amet,illum definitiones no quo,maluisset concludaturque et eum ,altera fabulas ut quo .Atqui causae gloratur ius te ,id agam omnis evert
itur eum .Affert laboramus repudiandae necet .Inciderint efficiantur his ad .Eum no molestiae Voluptatibus.</p>
<p> Some text to enable scrolling . Lorem ipsum dolor sit amet,illum definitiones no quo,maluisset concludaturque et eum ,altera fabulas ut quo .Atqui causae gloratur ius te ,id agam omnis evert
itur eum .Affert laboramus repudiandae necet .Inciderint efficiantur his ad .Eum no molestiae Voluptatibus.</p>
<p> Some text to enable scrolling . Lorem ipsum dolor sit amet,illum definitiones no quo,maluisset concludaturque et eum ,altera fabulas ut quo .Atqui causae gloratur ius te ,id agam omnis evert
itur eum .Affert laboramus repudiandae necet .Inciderint efficiantur his ad .Eum no molestiae Voluptatibus.</p>
<p> Some text to enable scrolling . Lorem ipsum dolor sit amet,illum definitiones no quo,maluisset concludaturque et eum ,altera fabulas ut quo .Atqui causae gloratur ius te ,id agam omnis evert
itur eum .Affert laboramus repudiandae necet .Inciderint efficiantur his ad .Eum no molestiae Voluptatibus.</p>
<p> Some text to enable scrolling . Lorem ipsum dolor sit amet,illum definitiones no quo,maluisset concludaturque et eum ,altera fabulas ut quo .Atqui causae gloratur ius te ,id agam omnis evert
itur eum .Affert laboramus repudiandae necet .Inciderint efficiantur his ad .Eum no molestiae Voluptatibus.</p>
</body>
</html>
运行效果：
评论