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...
我在開發中常用它來貼上摘要表,也會用在粘性頁尾導航上,這種方法非常適合。
瀏覽器支援
-webkit
position: -webkit-sticky; /* Safari */ position: sticky;
最後的話
本文到此就結束了,我希望你能喜歡這篇文章,並從我的經驗中學習到一些東西。
如果你喜歡這篇文章,我會非常感謝你的掌聲和分享 :-)
本文首發微信公眾號:jingchengyideng
歡迎掃描二維碼關注公眾號,每天都給你推送新鮮的前端技術文章