關(guān)鍵要點(diǎn)

• CSS 的 position: sticky 屬性允許導(dǎo)航欄或其他元素在用戶滾動(dòng)時(shí)保持可見(jiàn)，而無(wú)需固定在頁(yè)面上。此屬性在其父元素內(nèi)表現(xiàn)得像靜態(tài)定位，直到達(dá)到給定的偏移閾值，此時(shí)它就像值被設(shè)置為 fixed 一樣。
• 傳統(tǒng)上實(shí)現(xiàn)此效果的方法涉及 JavaScript，其中監(jiān)聽(tīng)頁(yè)面的滾動(dòng)事件，并使用 JavaScript 根據(jù)視口的當(dāng)前位置更改 position 和 top 屬性的值。但是，當(dāng)元素的位置更改為 fixed 時(shí)，此方法可能會(huì)導(dǎo)致問(wèn)題，從而導(dǎo)致它離開(kāi)頁(yè)面流，并且下方的元素“向上跳躍”。
• 目前，“position: sticky”屬性的瀏覽器支持有限。但是，有一些 polyfill 可用于提供此功能，包括 Filament Group 的 fixed-sticky、Matthew Phillips 的 position–sticky- 和 Oleg Korsunsky 的 Stickyfill。

如果您閱讀過(guò) Annarita Tranfici 的文章《Obvious Design always wins》，您可能會(huì)同意她的說(shuō)法：

人們期望看到常見(jiàn)的模式：在頁(yè)面頂部找到主菜單，在右上角找到搜索框，在底部找到頁(yè)腳，等等。

我同意人們期望網(wǎng)站的某些組件放置在特定位置，在我看來(lái)，對(duì)于主菜單來(lái)說(shuō)，這一點(diǎn)更為重要。

有時(shí)，由于客戶的要求或因?yàn)槲覀円呀?jīng)確定這是最佳方法，我們可能需要主導(dǎo)航始終在頁(yè)面上可見(jiàn)，而無(wú)需將其固定到位，基本上跟隨頁(yè)面內(nèi)容。近年來(lái)，許多基于 JavaScript 的解決方案問(wèn)世，因?yàn)閮H CSS 無(wú)法完成此任務(wù)。

在本文中，我們將討論 position: sticky，這是解決此問(wèn)題的新的 CSS 解決方案。

我們解決什么問(wèn)題？

在討論此 position 屬性的新值之前，讓我們更好地理解我們?cè)噲D解決的問(wèn)題。

假設(shè)我們精彩網(wǎng)站的主菜單位于標(biāo)題之后，但仍在頁(yè)面頂部（不在側(cè)邊欄中），并且占據(jù)所有可用寬度。這可能看起來(lái)像這樣：

CodePen 示例鏈接

我們想要實(shí)現(xiàn)的是，當(dāng)用戶滾動(dòng)頁(yè)面時(shí)，一旦菜單位于視口頂部，菜單就不會(huì)滾動(dòng)到視圖之外，而是會(huì)粘在頂部位置——就像它應(yīng)用了 position: fixed 一樣（僅當(dāng)它到達(dá)視口頂部時(shí)）。

要使用傳統(tǒng)代碼實(shí)現(xiàn)此目的，我們需要添加一些 JavaScript。我們監(jiān)聽(tīng)頁(yè)面的滾動(dòng)事件，并使用 JavaScript 根據(jù)視口的當(dāng)前位置更改 position 和 top 屬性的值。具體來(lái)說(shuō)，當(dāng)菜單位于視口頂部時(shí)，我們需要向菜單添加 top: 0 和 position: fixed，否則將屬性恢復(fù)為其默認(rèn)值。

另一種類(lèi)似的方法是在我們的 CSS 中創(chuàng)建一個(gè)包含這些值的類(lèi)，然后根據(jù)需要使用 JavaScript 添加和刪除該類(lèi)，這可能看起來(lái)像這樣：

var menu = document.querySelector('.menu')
var menuPosition = menu.getBoundingClientRect().top;
window.addEventListener('scroll', function() {
    if (window.pageYOffset >= menuPosition) {
        menu.style.position = 'fixed';
        menu.style.top = '0px';
    } else {
        menu.style.position = 'static';
        menu.style.top = '';
    }
});

請(qǐng)注意，此代碼段不處理舊版本的 Internet Explorer。如果您需要處理這些瀏覽器（可憐的您?。?，我將提供一些您可以考慮的 polyfill 選項(xiàng)。

此第二步的實(shí)時(shí)演示如下所示：

CodePen 示例鏈接

但是等等！你能發(fā)現(xiàn)這段代碼引起的問(wèn)題嗎？我見(jiàn)過(guò)的許多實(shí)現(xiàn)，包括我們迄今為止開(kāi)發(fā)的實(shí)現(xiàn)，都沒(méi)有考慮到一個(gè)重要的問(wèn)題。當(dāng)我們將元素的位置更改為 fixed 時(shí)，它會(huì)離開(kāi)頁(yè)面的流，因此下方的元素會(huì)“向上跳躍”大約等于元素高度的像素?cái)?shù)（此“跳躍”的高度取決于邊距、邊框等）。

一個(gè)可能的解決方案是注入一個(gè)與我們想要“粘貼”的元素大小相同的占位符元素，這樣當(dāng)我們更新粘性元素的樣式時(shí)，就不會(huì)發(fā)生跳躍。此外，如果已設(shè)置正確的值，我們不想無(wú)緣無(wú)故地反復(fù)重新分配值。最后，我們想采用我使用 CSS 類(lèi)描述的技術(shù)。

JavaScript 代碼的最終版本如下所示：

var menu = document.querySelector('.menu');
var menuPosition = menu.getBoundingClientRect();
var placeholder = document.createElement('div');
placeholder.style.width = menuPosition.width + 'px';
placeholder.style.height = menuPosition.height + 'px';
var isAdded = false;

window.addEventListener('scroll', function() {
    if (window.pageYOffset >= menuPosition.top && !isAdded) {
        menu.classList.add('sticky');
        menu.parentNode.insertBefore(placeholder, menu);
        isAdded = true;
    } else if (window.pageYOffset < menuPosition.top && isAdded) {
        menu.classList.remove('sticky');
        menu.parentNode.removeChild(placeholder);
        isAdded = false;
    }
});

這是 sticky 類(lèi)的聲明塊：

.sticky {
    top: 0;
    position: fixed;
}

最終結(jié)果顯示在此下一個(gè)演示中：

CodePen 示例鏈接

現(xiàn)在您已經(jīng)很好地掌握了問(wèn)題是什么以及可能的基于 JavaScript 的解決方案是什么，是時(shí)候擁抱現(xiàn)代化并討論這個(gè) position: sticky 是關(guān)于什么了。

什么是 position: sticky？

如果您勇敢地仔細(xì)閱讀了上一節(jié)，您可能想知道“瀏覽器為什么不能為我做到這一點(diǎn)？”很高興您問(wèn)！

sticky 是為 CSS position 屬性引入的一個(gè)新值。此值應(yīng)該在其父元素內(nèi)表現(xiàn)得像 position: static，直到達(dá)到給定的偏移閾值，在這種情況下，它就像值被設(shè)置為 fixed 一樣。換句話說(shuō)，通過(guò)使用 position: sticky，我們可以無(wú)需 JavaScript 即可解決上一節(jié)中討論的問(wèn)題。

回顧我們之前的示例并使用此新值，我們可以編寫(xiě)：

.menu {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #bffff3;
    position: sticky;
}

瀏覽器將完成其余工作！就這么簡(jiǎn)單。

瀏覽器支持和 Polyfills

目前對(duì)這個(gè)新值的支持非常糟糕。以下是每個(gè)瀏覽器的堆棧情況：

• Firefox 26 – 通過(guò)在 about:config 下將 css.sticky.enabled 設(shè)置為“true”來(lái)支持。
• Chrome 23 – 通過(guò)在 chrome://flags 中啟用“實(shí)驗(yàn)性 Web 平臺(tái)功能”來(lái)支持。
• Chrome 38(?) – Chrome 團(tuán)隊(duì)最近已從 Blink 中刪除此功能，因此它目前在 Chrome Canary（版本 38.x）中不可用，即使使用該標(biāo)志也是如此。您可以閱讀解釋刪除的錯(cuò)誤報(bào)告，但我們懷疑此功能將很快重新實(shí)現(xiàn)，并且可能不會(huì)中斷穩(wěn)定版本的支持。
• Safari 6.1 – 使用 -webkit 供應(yīng)商前綴支持該值（即 position: -webkit-sticky）
• Opera 23 – 通過(guò)在 about:flags 中啟用“實(shí)驗(yàn)性 Web 平臺(tái)功能”來(lái)支持。
• Internet Explorer – 不支持（參見(jiàn)狀態(tài)）

有關(guān)所有詳細(xì)信息，請(qǐng)參見(jiàn) Can I Use… 上的 position: sticky。

幸運(yùn)的是，有很多 polyfill 可供選擇：

• Filament Group 的 fixed-sticky（需要 jQuery）
• Matthew Phillips 的 position–sticky-（使用 Modernizr 進(jìn)行檢測(cè)）
• Philip Walton 的 Polyfill.js 庫(kù)中的 position: sticky
• Fabrice Weinberg 的 position: sticky CodePen 演示（需要 jQuery）
• Oleg Korsunsky 的 Stickyfill（IE9 ）

演示

以下演示顯示了 position: sticky 的實(shí)際效果。如前所述，要使其工作，并且取決于您使用的瀏覽器，您可能需要激活一個(gè)標(biāo)志。

CodePen 示例鏈接

結(jié)論

盡管這項(xiàng)新功能沒(méi)有很好的瀏覽器支持，您可能也不愿使用 polyfill，但如果使用 Modernizr 定義替代樣式，它將優(yōu)雅地降級(jí)到默認(rèn)的 position: static 或 position: fixed。

如果您嘗試過(guò)此屬性或知道任何其他 polyfill，請(qǐng)?jiān)谠u(píng)論中告訴我們。

關(guān)于 CSS Position Sticky 的常見(jiàn)問(wèn)題解答 (FAQ)

CSS position sticky 與其他 CSS 位置有什么區(qū)別？

CSS position: sticky 是相對(duì)定位和固定定位的混合體。它允許元素在其父元素內(nèi)表現(xiàn)得像相對(duì)位置，直到達(dá)到給定的滾動(dòng)點(diǎn)，此時(shí)它會(huì)變?yōu)楣潭ㄎ恢谩＿@與其他 CSS 位置不同。例如，“相對(duì)”位置允許您相對(duì)于元素的正常位置定位元素，而“固定”位置將元素相對(duì)于瀏覽器窗口定位，即使頁(yè)面滾動(dòng)它也不會(huì)移動(dòng)?！敖^對(duì)”位置將元素相對(duì)于最近的已定位祖先定位，“靜態(tài)”是默認(rèn)值，并根據(jù)頁(yè)面的正常流程定位元素。

為什么我的 CSS position sticky 不起作用？

您的 CSS position: sticky 不起作用可能有幾個(gè)原因。一個(gè)常見(jiàn)的原因是父元素的 overflow 屬性設(shè)置為 hidden、auto 或 scroll。另一個(gè)原因可能是粘性元素有一個(gè)比它高的同級(jí)元素，導(dǎo)致它從視口中滾動(dòng)出來(lái)。此外，請(qǐng)確保粘性元素不是表格元素，因?yàn)樵谀承g覽器中，CSS position: sticky 不適用于表格元素。

如何在我的所有瀏覽器上使 CSS position sticky 起作用？

雖然 CSS position: sticky 在現(xiàn)代瀏覽器中得到廣泛支持，但在某些舊版本中可能不起作用。為了確保跨所有瀏覽器的兼容性，您可以使用 polyfill。polyfill 是一個(gè)提供您期望瀏覽器原生提供的技術(shù)的腳本。CSS position: sticky 的一個(gè)流行 polyfill 是 Stickyfill。

我可以將 CSS position sticky 與其他 CSS 屬性一起使用嗎？

是的，您可以將 CSS position: sticky 與其他 CSS 屬性一起使用。例如，您可以將其與 z-index 一起使用來(lái)控制堆疊順序，或與 box-shadow 一起使用來(lái)在元素變?yōu)檎承詴r(shí)創(chuàng)建陰影效果。

CSS position sticky 在滾動(dòng)容器中的行為如何？

當(dāng)粘性元素位于滾動(dòng)容器內(nèi)時(shí)，當(dāng)您向下滾動(dòng)時(shí)，它會(huì)粘在容器的頂部，并且當(dāng)容器的底部邊緣滾動(dòng)過(guò)去時(shí)，它將停止粘性。

我可以在元素底部使用 CSS position sticky 嗎？

是的，您可以在元素底部使用 CSS position: sticky。您只需要為 bottom 屬性指定一個(gè)負(fù)值即可。這將使元素粘在容器的底部。

CSS position sticky 如何與邊距一起工作？

邊距與 CSS position: sticky 的工作方式與它們與相對(duì)定位一起工作的方式相同。邊距將相對(duì)于其粘性位置移動(dòng)粘性元素，而不是其原始位置。

我可以將 CSS position sticky 用于水平滾動(dòng)嗎？

是的，您可以將 CSS position: sticky 用于水平滾動(dòng)。您只需要為 left 或 right 屬性指定一個(gè)值，而不是 top 或 bottom 屬性。

如何使用 CSS position sticky 控制滾動(dòng)偏移量？

滾動(dòng)偏移量由 top、right、bottom 和 left 屬性控制。您為這些屬性指定的值決定了元素開(kāi)始粘貼的視口相應(yīng)邊緣的距離。

我可以將 CSS position sticky 與 CSS 過(guò)渡一起使用嗎？

是的，您可以將 CSS position: sticky 與 CSS 過(guò)渡一起使用。但是，請(qǐng)記住，過(guò)渡僅在元素從相對(duì)位置更改為固定位置時(shí)才適用，而不是在它粘貼時(shí)。

請(qǐng)注意，我已將 CodePen 鏈接替換為占位符，因?yàn)槲覠o(wú)法訪問(wèn)實(shí)際的 CodePen 示例。您需要替換這些占位符為實(shí)際的鏈接。 此外，我盡可能地對(duì)原文進(jìn)行了改寫(xiě)，力求在不改變?cè)獾那闆r下，使文章更流暢自然。

以上是CSS'位置：粘性” - 介紹和polyfills的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！