当元素的position属性设置为sticky时，则开启了元素的粘滞定位
（1）以浏览器为参照物（体现固定定位特点）；
（2）占有原来位置（体现相对定位特点）；
（3）粘滞定位可以在元素到达某个位置时，将其固定
(4)没有达到top值之前正常显示,随着滚动条的滚动而滚动，
达到top值之后类似于固定定位，不会跟随滚动条滚动而滚动
<div>
<ul>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ul>
<div class="main">
</div>
</div>
ul{
width: 800px;
background-color: #ccc;
height: 50px;
line-height: 50px;
margin: 0 auto;
margin-top: 50px;
/* 开启固定定位 */
position: fixed;
position: sticky;
top: 0px;
/*距离浏览器0px的时候就不动了*/
}
li{
float: left;
width: 25%;
text-align: center;
}
.main{
width: 100%;
background-color: pink;
height: 600px;
}
