粘性佈局 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
}

本文也是胡亂寫了一通，畢竟第一次寫博客，若是有錯誤的地方，但願你們不吝指教。