粘性布局 position:sticky

今天在网上浏览时偶然发现原来CSS中的position属性除了有如下几个取值以外：

• static(默认)
• relative
• absolute
• fixed
• inhert

还有一个以前没见到的取值：

• sticky

没错= =就是它!

sticky顾名思义粘性的，它的做用以下：

盒位置根据正常流计算，而后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在全部状况下（即使被定位元素为 table 时），该元素定位均不对后续元素形成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来肯定。

这样的解释仍是模模糊糊的，接下来用例子来看一下（一言不合就发代码）：

 

html代码以下：

<div>
    <dl>
         <dt>A</dt>
         <dd>A1</dd>
         <dd>A2</dd>
         <dd>A3</dd>
         <dd>A4</dd>
         <dd>A5</dd>
         <dd>A6</dd>
     </dl>
     <dl>
          <dt>C</dt>
          <dd>C1</dd>
          <dd>C2</dd>
          <dd>C3</dd>
          <dd>C4</dd>
          <dd>C5</dd>
          <dd>C6</dd>
      </dl>
      <dl>
          <dt>D</dt>
          <dd>D1</dd>
          <dd>D2</dd>
          <dd>D3</dd>
          <dd>D4</dd>
          <dd>D5</dd>
          <dd>D6</dd>
      </dl>
      <dl>
          <dt>E</dt>
          <dd>E1</dd>
          <dd>E2</dd>
          <dd>E3</dd>
          <dd>E4</dd>
          <dd>E5</dd>
          <dd>E6</dd>        
      </dl>
      <dl>
          <dt>F</dt>
          <dd>F1</dd>
          <dd>F2</dd>
          <dd>F3</dd>
          <dd>F4</dd>
          <dd>F5</dd>
          <dd>F6</dd>
      </dl>
      <dl>
          <dt>T</dt>
          <dd>T1</dd>
          <dd>T2</dd>
          <dd>T3</dd>
          <dd>T4</dd>
          <dd>T5</dd>
          <dd>T6</dd>
      </dl>
 </div>

 

CSS代码以下：

PS：（必定要设置top值，不然效果会和相对定位同样。如下设置了top: -1px;则当sticky元素位置距离定位的父级大于-1px时，相对定位；小于-1px时（fixed）固定定位）

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

dl {
    padding: 24px 0 0 0;
}

dl:nth-child(1) {
    padding: 0;
}

dt {
    font: bold 18px/21px sans-serif;
    background: #B8C1C8;
    border-bottom: 1px solid #989EA4;
    border-top: 1px solid #717D85;
    color: #FFF;
    padding: 2px 0 0 12px;
    /*粘性布局*/
    position: sticky;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    top: -1px;
}

dd {
    font: bold 20px/45px sans-serif;
    padding: 0 0 0 12px;
}

dd + dd {
    border-top: 1px solid #CCC;
}    

 运行效果以下：

 粘性布局能够用于：

• 制做电话簿列表
• 旅游app的地点选择页
• 宣传页面的顶部导航条
• 等等。。。

虽然粘性布局很是方便，但它的缺点也很明显，即兼容性很差，见下图：

 

相对来讲，在ios的兼容性较好，因此放心大胆的在ios上用吧！

由此看来，对于使用粘性布局咱们仍是须要用js来检测一下浏览器是否支持sticky值的，能够用如下代码来判断：

if (CSS.supports("position", "sticky") || CSS.supports("position", "-webkit-sticky")) {
    // 支持 sticky
}

本文也是胡乱写了一通，毕竟第一次写博客，若是有错误的地方，但愿你们不吝指教。