Amazing css属性之position: sticky

简介

在开发移动端app时，经常会碰到需要这样一种情况，网站滚动到一定高度的时候，让一部分内容作为navbar，也就是置顶显示，我们一般会使用js监听scroll事件来实现，但是新增的css属性position:sticky可以简单实现。单词sticky的中文意思是“粘性的”，position:sticky表现也符合这个粘性的表现。

用法

在目标区域以内，它的行为就像position:relative;在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。可以说是相对定位relative和固定定位fixed的结合

条件限制

1.父元素不能overflow:hidden或者overflow:auto属性。

2.必须指定top、bottom、left、right4个值之一，否则只会处于相对定位

3.父元素的高度不能低于sticky元素的高度

4、sticky元素仅在其父元素内生效

5、浏览器兼容性问题(IE不支持)

html

<div class="list">
    <div class="top">Top</div>
    <div>第1行</div>
    <div>第2行</div>
    <div>第3行</div>
    <div>第4行</div>
    <div>第5行</div>
    <div>第6行</div>
    <div>第7行</div>
    <div>第8行</div>
    <div>第9行</div>
    <div>第10行</div>
    <div>第11行</div>
    <div>第12行</div>
    <div>第13行</div>
    <div>第14行</div>
 </div>

css

.list {
        background-color: oldlace;
        height: 300px;
        width: 200px;
        overflow: auto;
        text-align: center;
      }
.list .top {
            position: sticky;
            top: 0;
            background: #f1f1f1;
            border-top: #ddd 1px solid;
            font-size: 14px;
           }
.list div {
           height: 30px;
           line-height: 30px;
           font-size: 12px;
           background-color: white;
           border-bottom: #ddd 1px solid;
           border-left: #ddd 1px solid;
           border-right: #ddd 1px solid;
          }

Demo

position:stikcy