粘性定位是相對定位和固定定位的混合枢贿。元素在跨越特定閾值前為相對定位鼻由，之后為固定定位。
#one { position: sticky; top: 10px; }
在 viewport 視口滾動(dòng)到元素 top 距離小于 10px 之前举户，元素為相對定位。之后遍烦，元素將固定在與頂部距離 10px 的位置俭嘁，直到 viewport 視口回滾到閾值以下。
粘性定位常用于定位字母列表的頭部元素服猪。標(biāo)示 B 部分開始的頭部元素在滾動(dòng) A 部分時(shí)供填，始終處于 A 的下方。而在開始滾動(dòng) B 部分時(shí)罢猪，B 的頭部會(huì)固定在屏幕頂部近她，直到所有 B 的項(xiàng)均完成滾動(dòng)后，才被 C 的頭部替代膳帕。
須指定 top
, right
, bottom
或 left
四個(gè)閾值其中之一粘捎，才可使粘性定位生效。否則其行為與相對定位相同危彩。
HTML 內(nèi)容
<div>
<dl>
<dt>A</dt>
<dd>Andrew W.K.</dd>
<dd>Apparat</dd>
<dd>Arcade Fire</dd>
<dd>At The Drive-In</dd>
<dd>Aziz Ansari</dd>
</dl>
<dl>
<dt>C</dt>
<dd>Chromeo</dd>
<dd>Common</dd>
<dd>Converge</dd>
<dd>Crystal Castles</dd>
<dd>Cursive</dd>
</dl>
<dl>
<dt>E</dt>
<dd>Explosions In The Sky</dd>
</dl>
<dl>
<dt>T</dt>
<dd>Ted Leo & The Pharmacists</dd>
<dd>T-Pain</dd>
<dd>Thrice</dd>
<dd>TV On The Radio</dd>
<dd>Two Gallants</dd>
</dl>
</div>
CSS內(nèi)容
* {
box-sizing: border-box;
}
dl {
margin: 0;
padding: 24px 0 0 0;
}
dt {
background: #B8C1C8;
border-bottom: 1px solid #989EA4;
border-top: 1px solid #717D85;
color: #FFF;
font: bold 18px/21px Helvetica, Arial, sans-serif;
margin: 0;
padding: 2px 0 0 12px;
position: -webkit-sticky;
position: sticky;
top: -1px;
}
dd {
font: bold 20px/45px Helvetica, Arial, sans-serif;
margin: 0;
padding: 0 0 0 12px;
white-space: nowrap;
}
dd + dd {
border-top: 1px solid #CCC
}
詳細(xì)資料：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position#Sticky_positioning
