CSS设置滚动条滚动到一定的位置，相对应的元素就不动了粘滞定位

这个主要用到的就是粘滞定位 ，一般用于页面导航的吸顶效果。

他是static（没有定位） 和 固定定位fixed 的结合；它主要用在对 scroll 事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到 sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置

    当元素的position属性设置为sticky时，则开启了元素的粘滞定位
    （1）以浏览器为参照物（体现固定定位特点）；
    （2）占有原来位置（体现相对定位特点）；
　（3）粘滞定位可以在元素到达某个位置时，将其固定 
      (4)没有达到top值之前正常显示,随着滚动条的滚动而滚动，
        达到top值之后类似于固定定位，不会跟随滚动条滚动而滚动 

开启粘滞定位：

1.  
   div {
2.  
   position: sticky;
3.  
   }

首先我们先建立一个导航条和一个主题内容

1.  
2.  
   <div>
3.  
   <ul>
4.  
   <li>美食</li>
5.  
   <li>旅游</li>
6.  
   <li>游戏</li>
7.  
   <li>学习</li>
8.  
   </ul>
9.  
   <div class="main">
10.  
    </div>
11.  
    </div>
12.  
     
13.  

再开始写css样式

1.  
    
2.  
   ul{
3.  
   width: 800px;
4.  
   background-color: #ccc;
5.  
   height: 50px;
6.  
   line-height: 50px;
7.  
   margin: 0 auto;
8.  
   margin-top: 50px;
9.  
   /* 开启固定定位 */
10.  
    position: fixed;
11.  
    position: sticky;
12.  
    top: 0px;
13.  
    /*距离浏览器0px的时候就不动了*/
14.  
    }
15.  
    li{
16.  
    float: left;
17.  
    width: 25%;
18.  
    text-align: center;
19.  
    }
20.  
    .main{
21.  
    width: 100%;
22.  
    background-color: pink;
23.  
    height: 600px;
24.  
    }

结果展示：

这篇好文章是转载于：编程之路