背景
最近項目中遇到一個需求大體是在一個複雜表格中實現滾動的時候，第一行是置頂固定不動，其餘行正常滾動，有點類似於表格左右滾動的時候設置了固定列的效果一樣。但是在現在的ui庫中不管是antd, ele ui還是material-ui中都沒有設置固定行的效果，最多是可以設置固定列。後來在github上了解到 antd 不做這種效果的原因是這樣會多出很多複雜的計算，擔心會影響頁面性能，後來就用position:sticky; 來實現這種展示效果。發現這個屬性比較冷門，但確實好用。所以記錄一下。
效果
先看最終達成的頁面效果:
可以看到隨着表格的滾動，第一行的數據(總計那一行)始終置頂並沒有隨着其他行的數據一起向上滾動。這樣的業務場景就非常適合使用粘性佈局來實現。
position:sticky
這個屬性的表現有點像position:relative;和position:absolute;的結合體，設置了該屬性的盒子首先會根據正常流計算其在文檔中的位置，一旦達到了你設置的某個閥值，就會相對他的 containing block（最近的塊級祖先元素）來定位(這時候表象的就像 absolute一樣)。而這裏設置的閾值一般都是top, bottom, left, right 其中之一。
看幾個例子就能理解其中意思：
線上demo地址：
demo1
demo2
可以看到上面的滾動盒子中一旦到達了距離頂部10px的位置的時候 target box就會附着在上面，並不會隨着其餘的盒子一起向上滾動。如果同時設置了right,和left的閾值，那這個盒子就會一直在父元素的視口之內，從而達到類似demo2的效果。
有的時候可以利用這個屬性的特性來達到一些特別的效果，比如下面這個類似查字典的效果，可以看到當前查閱的是那個字母開頭的單詞，如果字母下還有單詞展示，那麼該字母就會一直顯示在頂部，直至最後沒有要展示的單詞，纔會跟隨一起向上滾動消失在視口中。
點我查看線上demo地址
當然在表格中的這個效果不僅僅侷限第一行，我們可以設置任一一行或者多行達到這種效果，如下面所示，第一行和第三行開始是正常顯示，隨着用戶向上滾動，可以利用 sticky 實現第一行和第三行置頂在表格的上面。
點我查看線上demo
關鍵的代碼其實就那麼一兩行，代碼在上述的在線demo中都有，這裏貼一下最關鍵的代碼：
.target{
background-color: burlywood;
position: -webkit-sticky;
position: sticky; // 粘性佈局
top: 20px; // 設置的閾值
}
記得 webkit 內核的要添加上私有前綴 -webkit-
兼容性
功能其實挺好用的，而且簡單，看一下兼容性如何：
其實兼容性還算挺好的，各個瀏覽器 ff chrome edge都支持，除了讓人頭疼的IE瀏覽器…┭┮﹏┭┮