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

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

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

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

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

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

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

我們解決什麼問題？

在討論此 position 屬性的新值之前，讓我們更好地理解我們試圖解決的問題。

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

CodePen 示例鏈接

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

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

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

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

一個(gè)可能的解決方案是注入一個(gè)與我們想要“粘貼”的元素大小相同的佔(zhàn)位符元素，這樣當(dāng)我們更新粘性元素的樣式時(shí)，就不會(huì)發(fā)生跳躍。此外，如果已設(shè)置正確的值，我們不想無緣無故地反復(fù)重新分配值。最後，我們想採用我使用 CSS 類描述的技術(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 類的聲明塊：

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

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

CodePen 示例鏈接

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

什麼是 position: sticky？

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

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

回顧我們之前的示例並使用此新值，我們可以編寫：

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

瀏覽器將完成其餘工作！就這麼簡單。

瀏覽器支持和 Polyfills

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

• Firefox 26 – 通過在 about:config 下將 css.sticky.enabled 設(shè)置為“true”來支持。
• Chrome 23 – 通過在 chrome://flags 中啟用“實(shí)驗(yàn)性 Web 平臺(tá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 – 通過在 about:flags 中啟用“實(shí)驗(yàn)性 Web 平臺(tái)功能”來支持。
• Internet Explorer – 不支持（參見狀態(tài)）

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

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

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

演示

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

CodePen 示例鏈接

結(jié)論

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

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

關(guān)於 CSS Position Sticky 的常見問題解答 (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ì)於瀏覽器窗口定位，即使頁面滾動(dòng)它也不會(huì)移動(dòng)。 “絕對(duì)”位置將元素相對(duì)於最近的已定位祖先定位，“靜態(tài)”是默認(rèn)值，並根據(jù)頁面的正常流程定位元素。

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

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

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

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

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

是的，您可以將 CSS position: sticky 與其他 CSS 屬性一起使用。例如，您可以將其與 z-index 一起使用來控制堆疊順序，或與 box-shadow 一起使用來在元素變?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)過去時(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 屬性控制。您為這些屬性指定的值決定了元素開始粘貼的視口相應(yīng)邊緣的距離。

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

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

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

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