css position:sticky
阿新 • • 發佈：2018-11-26
position 是 CSS中的一個常用屬性，常見的取值有：relative，absolute，static，fixed，不過我還有一個取值想必很多同學都沒聽過，那就是sticky，這個定位是幹啥用的呢？
我們經常會遇到的一個場景就是，網頁左側有一個重要區域，正常情況下是跟隨網頁滾動條滾動的，當該元素到達瀏覽器頂部時，元素的定位就變成了fixed不動了。
對於這種需求的解決方案通常藉助JS和CSS,通過檢測滾動事件來修改元素的定位屬性，或者使用第三方外掛。
而sticky 恰恰是解決這種場景的純CSS方案，sticky 的中文意思是粘性，也就是粘在某個地方。
將下面的程式碼儲存在一個HTML檔案 在瀏覽器中開啟，體驗一下sticky的效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .out{ margin-top:100px; position:relative; height:100%; background-color:pink; } .inner{ width:100px; height:300px; background-color:red; position:sticky; top:0; left:100px; } body{ height:10000px; } </style> </head> <body> <div class="out"> <div class="inner"></div> </div> </body> </html>
需要注意的一點是，要實現粘性定位，必須要指定top，right，bottom，left，四個屬性之一，否則是沒有效果的。
目前瀏覽器對於sticky的支援不太樂觀，推薦加上相應的polyfill