CSS设置滚动条滚动到一定的位置，相对应的元素就不动了（固定导航

当元素的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;
}