解析position: sticky;

普拉斯強發表於2022-01-22

是什麼

粘性定位position sticky元素採用正常的文件流佈局（static）,當其邊框（border矩形）相對於最近的滾動祖先元素的內邊框（即content矩形）的小於指定閾值時，則position sticky元素相對於該最近的滾動祖先元素固定位置。

怎麼用

要實現粘性定位除了指定position: sticky;外還需指定閾值，即水平滾動必須指定left/right，垂直滾動必須指定top/bottom。
如：

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

粘性定位position sticky可用於實現一些“吸頂”效果

進階

閾值怎麼計算的

image
比如：

.sticky-btn{
    position: sticky;
    top: 10px;
}

則表示.sticky-btn元素的上border矩形邊框距離滾動容器的上內邊框（即content矩形）邊的距離小於10px時，則元素固定位置。

多個sticky元素

  1. 在一個滾動容器裡可以存在多個有效的sticky元素，sticky元素之間的行為互相獨立；
  2. sticky元素屬於定位元素，當多個sticky元素髮生重疊時遵循定位元素的重疊原則。

其他

  1. 失效的sticky元素行為同relative定位。

失效的sticky元素

初次使用position: sticky;總是發現沒有達到效果，常見的原因有：

  1. 水平滾動時檢查是否指定left/right；
  2. 垂直滾動是檢查是否指定top/bottom；
  3. sticky元素的某個父元素（或者祖先元素）指定了overflow/overflow-x/overflow-y屬性，且取值是hidden/scroll/auto；
  4. sticky元素的父元素（不是祖先元素）在滾動元素視口裡還不可見。
    可以看看這個Demo

相容性

Can I Use CSS position: sticky

As of 2020, 95% of browsers have some level of support for position: sticky
Older versions of Safari will require the -webkit vendor-prefix

一般這樣寫：

position: -webkit-sticky;
position: sticky;

降級方案（polyfill）

如果非得要相容各個瀏覽器，則得使用JS實現了。好在已經有很多優秀的庫了：

  1. react-sticky
  2. Stickybits

參考

整理自GitHub筆記: 解析position: sticky;。

Buy me a coffee ☕

相關文章