徹底理解粘性定位 - position: sticky

粘性定位可以被認(rèn)為是相對(duì)定位(position: relative)和固定定位(position: fixed)的混合。元素在跨越特定閾值前為相對(duì)定位，之后為固定定位。例如:

.sticky-header?{
??position:?sticky;
??top:?10px;?
}

在 視口滾動(dòng)到元素 top 距離小于 10px 之前，元素為相對(duì)定位。之后，元素將固定在與頂部距離 10px 的位置，直到視口回滾到閾值以下。

粘性定位常作用在導(dǎo)航和概覽信息(標(biāo)題，表頭，操作欄，底部評(píng)論等)上。這樣，用戶在瀏覽詳細(xì)信息時(shí)，也能看到信息的概覽和做一些操作，給用戶帶來(lái)便捷的使用體驗(yàn)。

粘性定位看著很簡(jiǎn)單，但也很容易出現(xiàn)不生效的情況。為幫助大家徹底理解粘性定位，本文會(huì)從 3 個(gè)方面來(lái)介紹：

• 粘性定位的原理。
• 不生效的情況。
• 具體的例子。

原理

為便于理解粘性定位，這里引入四個(gè)元素：視口元素，容器元素，粘性約束元素 和 sticky 元素。它們的關(guān)系如下：

視口元素：顯示內(nèi)容的區(qū)域。會(huì)設(shè)置寬，高。一般會(huì)設(shè)置 overflow:hidden。
容器元素：離 sticky 元素最近的能滾動(dòng)的祖先元素。
粘性約束元素：粘性定位的父元素。有時(shí)，也會(huì)出現(xiàn)粘性約束元素就是容器元素的情況。
sticky 元素：設(shè)置了 position: sticky; 的元素。

滾動(dòng)時(shí)，sticky 元素設(shè)置的 left, right, top, bottom 的值相對(duì)的是容器元素。當(dāng)粘性約束元素滾出視口時(shí)，sticky 元素也會(huì)滾出視口。

不生效的情況

情況1: 未指定 top, right, top 和 bottom 中的任何一個(gè)值

此時(shí)，設(shè)置 position: sticky 相當(dāng)于設(shè)置 position: relative。

要生效，要指定 top, right, top 或 bottom 中的任何一個(gè)值。

情況2: 垂直滾動(dòng)時(shí)，粘性約束元素高度小于等于 sticky 元素高度

不生效的原因：當(dāng)粘性約束元素滾出視口時(shí)，sticky 元素也會(huì)滾出視口。粘性約束元素比 sticky 元素還小，sticky 元素沒(méi)有顯示固定定位狀態(tài)的機(jī)會(huì)。

同樣的，水平滾動(dòng)時(shí)，粘性約束元素寬度小于等于 sticky 元素寬度時(shí)，也不會(huì)生效。

情況3: 粘性約束元素和容器元素之間存在 overflow: hidden 的元素

該情況的示例代碼:

<div?class="viewport">
??<div?class="container">?<!--?容器元素?-->
????<div?style="overflow:?hidden">
??????<div>?<!--?粘性約束元素?-->
????????<div?class="stick-elem">...</div>??<!--?sticky?元素?-->
????????...
??????</div>
????</div>
??</div>
</div>

要生效，要把 overflow: hidden 的元素移除。

具體的例子

例子1: 頁(yè)面滾動(dòng)

這個(gè)例子，我們來(lái)實(shí)現(xiàn)頁(yè)面滾動(dòng)到文章內(nèi)容時(shí)，文章標(biāo)題吸頂?shù)男Ч?/p>

HTML 結(jié)構(gòu)如下：

<div?class="header">網(wǎng)站頭部</div>
<!--?粘性約束元素?-->
<div?class="article">
??<!--?sticky?元素?-->
??<h2?class="title">徹底理解粘性定位?-?position:?sticky</h2>
??<div?class="content">...</div>
</div>
<div?class="footer">網(wǎng)站底部</div>

在這個(gè)例子中，視口元素和容器元素都是 body。sticky 元素是 .title，因此只要在 sticky 元素上設(shè)置如下樣式即可:

.title?{
??position:?sticky;
??top:?0;
??background-color:?#fff;
}

例子2: 文章列表

這個(gè)例子，我們來(lái)實(shí)現(xiàn)一塊區(qū)域下有多篇文章，區(qū)域滾動(dòng)到文章內(nèi)容時(shí)，對(duì)應(yīng)的標(biāo)題和操作按鈕吸頂?shù)男Ч?/p>

HTML 結(jié)構(gòu)如下：

<!--?視口元素?-->
<div?class="viewport">
??<!--?容器元素?-->
??<div?class="container">
????<!--?文章:粘性約束元素?-->
????<div?class="article">
??????<div?class="sticky-header">
????????<h2>徹底理解粘性定位?-?position:?sticky</h2>
????????<div?class="options">
??????????<button>轉(zhuǎn)發(fā)</button>
??????????<button>點(diǎn)贊</button>
????????</div>
??????</div>
??????<div?class="article-content">...</div>
??</div>
??<!--?文章?-->
??<div?class="article">...</div>
??<div?class="article">...</div>
</div>

在這個(gè)例子中，視口元素是 .viewport，容器元素是 .container。sticky 元素是 .sticky-header。核心樣式如下:

/*?視口元素?*/
.viewport?{
??width:?50%;
??overflow:?hidden;
??height:?200px;
}
/*?容器元素?*/
.container?{
??overflow:?auto;
??height:?100%;
}
/*?粘性約束元素?*/
.article?{
??margin-bottom:?10px;
}
/*?sticky?元素?*/
.sticky-header?{
??position:?sticky;
??top:?0;
??padding:?5px?0;
??background-color:#fff;
}

例子3: 甘特圖

最后，我們來(lái)做個(gè)復(fù)雜點(diǎn)的例子：甘特圖。如下圖所示：

需要實(shí)現(xiàn)：

• 左側(cè)事項(xiàng)菜單總在最左側(cè)。
• 菜單的頭部和時(shí)間軸吸頂。
• 時(shí)間軸的年總在月的最左邊。

實(shí)現(xiàn)代碼有點(diǎn)多，就不在這里貼了。獲取完整源碼，關(guān)注公眾號(hào): 前端GOGOGO，回復(fù): 粘性定位。

最后

粘性定位的瀏覽器兼容性也很好：95.76% 的瀏覽器支持[1]。大家可以放心的使用~

推薦閱讀:

• position:sticky 粘性定位的幾種巧妙應(yīng)用[2]

參考資料

95.76% 的瀏覽器支持: https://caniuse.com/css-sticky

position:sticky 粘性定位的幾種巧妙應(yīng)用: https://segmentfault.com/a/1190000039858711

最后

如果你覺(jué)得這篇內(nèi)容對(duì)你挺有啟發(fā)，我想邀請(qǐng)你幫我三個(gè)小忙：

1. 點(diǎn)個(gè)「在看」，讓更多的人也能看到這篇內(nèi)容（喜歡不點(diǎn)在看，都是耍流氓 -_-）

2. 歡迎加我微信「?sherlocked_93?」拉你進(jìn)技術(shù)群，長(zhǎng)期交流學(xué)習(xí)...

3. 關(guān)注公眾號(hào)「前端下午茶」，持續(xù)為你推送精選好文，也可以加我為好友，隨時(shí)聊騷。