這篇文章詳細解釋了CSS中的sticky定位方式，并講解了它的工作原理。

CSS中的sticky定位有很好的瀏覽器支持，但許多開發(fā)者并沒有使用它。原因有兩方面：一是等待瀏覽器支持的時間太長，導致這個特性被遺忘；二是大部分開發(fā)者并不完全理解它的工作原理。

我假設(shè)你們都知道CSS定位，但讓我們簡要回顧一下：

直到3年前，有四個CSS位置： static ， relative ， absolute 和 fixed 。

static 或 relative 與 absolute 或 fixed 之間的主要區(qū)別在于它們在DOM流中占用的空間。static 和 relative 保留其在文檔流中的自然空間，而 absolute 和 fixed 則不保留空間，它們具有浮動行為。而新的sticky定位具有所有類型的相似性。

使用 position: sticky

使用 position: sticky 時，每個人都很快明白，當視口到達定義的位置時，元素會粘在那里。

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

有時候sticky定位能正常工作，有時候則不能。當它正常工作時，元素會"粘"在一定位置，但在滾動的其他部分，它又會停止"粘"住。作為一個每天都在使用CSS的人，作者無法接受自己不能深入理解這個問題的根本原因，所以決定深入研究sticky定位。

Stick 探索

在嘗試使用 sticky 定位的過程中，我很快發(fā)現(xiàn)，當一個具有sticky定位樣式的元素被包裹起來，并且它是包裹元素內(nèi)唯一的元素時，這個被定義為sticky定位的元素并不會"粘"住。

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

當我在包裹元素內(nèi)添加更多元素時，它開始正常工作了。

為什么？

這樣做的原因是，當一個元素被賦予sticky定位樣式時，粘性元素的容器是粘性元素可以粘住的唯一區(qū)域。這個元素沒有其他元素可以浮動，因為它只能浮動在兄弟元素上，而作為唯一的子元素，它沒有兄弟元素。

CSS Sticky  定位的真正工作原理！

CSS 的 sticky 定位有兩個主要部分，即粘性元素和粘性容器。

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

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

粘性容器——是包裹粘性項目的HTML元素。這是粘性項目可以浮動的最大區(qū)域。

當你使用 position: sticky 定義一個元素時，自動定義了父元素為粘性容器！

記住這一點非常重要！容器是粘性項目的作用域，項目無法離開其粘性容器。

這就是前面例子中，粘性元素一開始就沒有粘住的原因：粘性元素是粘性容器中唯一的子元素。

CSS Sticky 定位的視覺示例：

事例：https://codepen.io/elad2412/pen/QYLEdK

理解CSS的Sticky行為

就像我之前說的，CSS的 Sticky 定位與其他所有 CSS 定位方式的行為都不同，但另一方面，它與它們也有一些相似之處。讓我來解釋一下：

Relative 定位（或Static定位）- 粘性定位元素類似于相對定位和靜態(tài)定位，因為它保持DOM中的自然間隙（保持在流中）。

Fixed - 當項目固定時，它的行為與 position: fixed 完全相同，浮動在視口的相同位置，從流中移除。

Absolute 定位 - 在粘附區(qū)域的末尾，元素停止并堆疊在另一個元素的頂部，就像絕對定位元素在 position: relative 容器內(nèi)的行為一樣。

貼在底部？

在大多數(shù)情況下，使用 position: sticky 以將元素固定在頂部，類似于這樣：

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

這正是它被創(chuàng)建出來的原因，因為在此之前，只能通過JavaScript來實現(xiàn)。

但你也可以使用它將元素粘貼到底部。這意味著可以定義頁腳具有粘性位置，并且在向下滾動時始終會出現(xiàn)粘在底部。當我們到達粘性容器的末尾時，元素將停留在其自然位置。最好將其用于自然位置為粘性容器底部的元素。

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;
}

事例地址：https://codepen.io/elad2412/pen/MZZVjw

Browsers Support

• 除舊版 IE 外，所有主要現(xiàn)代瀏覽器都支持粘性定位。
• 對于Safari瀏覽器，需要添加 -webkit 前綴。

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