CSS粘性定位是怎樣工做的

翻譯：瘋狂的技術宅
原文： https://medium.com/@elad/css-...

---

本文首發微信公衆號：jingchengyideng
歡迎關注，天天都給你推送新鮮的前端技術文章

---

瀏覽器對 CSS粘性定位有着很是好的支持，但不少開發者都沒有用過它。

究其緣由有兩個：

第一，受到瀏覽器的良好支持須要漫長的等待：瀏覽器的支持每每須要很長的時間才能完成，到時候它的功能已經被人們遺忘了。

第二個緣由是不少開發者並不能徹底理解其工做原理背後的邏輯，這就是個人切入點。

我假設大家都知道什麼事CSS定位，不過仍是先簡單回顧一下比較好：

在3年前，有四種 CSS 定位： static、 relative、 absolute 和 fixed。

static 、 relative 、 absolute 和 fixed之間主要的區別在於它們在DOM流中佔用的空間。 static 和 relative 會保留它們在文檔流中的天然空間，而 absolute 和 fixed 則不會 —— 它們的空間被移除並且具備浮動行爲。

正如我下面將要解釋的那樣，新的粘性定位與全部類型都有類似之處。

個人第一個粘性定位

可能不少人都玩過粘性定位。我已經接觸過一段時間了，直到我意識到本身並非徹底理解它。

在第一個例子中，你們很容易就能看明白 當視口到達定義的位置時，元素會被粘住。

例：

.some-component{
    position: sticky;
    top: 0;
}

但問題是，它有時候能用，而有時卻不起做用。 當它工做時，元素會粘住，但在滾動到其餘部分，它會中止粘貼。 做爲一個靠 CSS 混飯吃的人，我徹底不能接受本身對這個問題是不理解的，因此我決定把粘性位置完全搞清楚。

探索粘性定位

在擺弄它的過程當中，我很快就注意到了：當一個具備 position:sticky 樣式的元素被包裝，且它是包裝元素中惟一的元素時，這個被定義爲 position:sticky 的元素就不會粘住。

<!-- DOESN'T WORK!!! -->
<style>
    .sticky{
        position: sticky;
        top: 0;
    }
</style>
<div class="wrapper">
   <div class="sticky">
        SOME CONTENT
   </div>
</div>

當我在包裝元素中添加更多元素時，它就能開始正常工做了。

這是爲何？

這是由於當一個元素被賦予 position: sticky 樣式時，粘性項目的容器是它能夠粘貼的惟一區域。 粘性元素沒有任何要浮動的元素，由於它只能浮動在同級元素上，做爲惟一的子元素，它不能浮動。

怎樣才能讓 CSS 粘性定位起做用

CSS 粘性定位有兩個主要部分，粘性元素（sticky item）和 粘性容器（sticky container）。

粘性元素 —— 是咱們用位置定義的 position: sticky 樣式。 當視口位置與位置定義匹配時，該元素將會浮動，例如： top: 0px 。

例：

.some-component{
    position: sticky;
    top: 0px;
}

粘性容器 —— 是包裝粘性元素的 HTML 元素。 這是粘性元素能夠浮動的最大區域。

當你定義一個具備 position:sticky 樣式的元素時，父元素會被自動定義爲粘性容器！
記住這一點很是重要！ 容器是粘性元素的範圍，而且該元素沒法離開其所在的粘性容器。

這就是爲何在前面的例子中，粘性元素沒有被粘住的緣由：這個粘性元素是粘性容器中惟一的子元素。

CSS 粘性定位的示意圖：

粘性元素與粘性容器

查看在CodePen上的例子：

https://codepen.io/elad2412/p...

理解 CSS 的粘性行爲

正如我前面說過的那樣，CSS 粘性定位的行爲與全部其餘 CSS 定位不同，但從另外一個角度來講，它們也有一些類似之處。我來解釋一下：

相對（或靜態）—— 粘性定位元素相似於相對和靜態位置，由於它保留了 DOM 中的天然間隙（留在流中）。
固定 —— 當元素被粘住時，它的行爲與 position: fixed 徹底相同，浮動在與視口的相同位置，並從流中移除。
絕對 —— 在粘貼區域的末尾，元素會中止，並堆疊在另外一個元素的頂部，就像一個絕對定位的元素被放在一個 position: relative 容器內的行爲。

粘在底部？

在大多數狀況下，您可使用粘性定位將元素粘貼到頂部，以下所示：

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

這正是它被設計的初衷，而在此以前，只能使用JavaScript完成這個功能。

但你也可使用它把元素粘到底部。 這意味着你能夠把頁腳定義爲粘性，而且在向下滾動時使它看起來老是被粘在底部。 當到達粘性容器的末端時，元素會停在它的天然位置。 最好是在以粘性容器底部爲天然位置的元素上使用它。

完整示例：

HTML

<main class="main-container">
  <header class="main-header">HEADER</header>
  <div class="main-content">MAIN CONTENT</div>
  <footer class="main-footer">FOOTER</footer>
</main>

CSS

.main-footer{     
     position: sticky; 
     bottom: 0;
}

去CodePen查看演示效果：https://codepen.io/elad2412/p...

我在開發中經常使用它來粘貼摘要表，也會用在粘性頁腳導航上，這種方法很是適合。

瀏覽器支持

• 除了老 IE 瀏覽器外，全部流行的現代瀏覽器都支持粘性定位。
• 若是用在 Safari 瀏覽器上，你須要添加 -webkit 前綴。

position: -webkit-sticky; /* Safari */  
position: sticky;

最後的話

本文到此就結束了，我但願你能喜歡這篇文章，並從個人經驗中學習到一些東西。
若是你喜歡這篇文章，我會很是感謝你的掌聲和分享 :-)

---

本文首發微信公衆號：jingchengyideng

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章