CSS中容易被忽視的 position屬性sticky

爲何要學習position:sticky

在開發移動端app時，常常會碰到須要這樣一種狀況 —— 網站滾動到必定高度的時候，讓一部份內容做爲navbar，也就是置頂顯示，咱們通常會使用js監聽scroll事件來實現，可是新增的css屬性position:sticky能夠簡單實現

我不是最後一個知道的：position: sticky

position的含義是指定位類型，取值類型能夠有：static、relative、absolute、fixed、inherit和sticky，這裏sticky是CSS3新發布的一個屬性。我今天重點要說的就是sticky屬性

position:sticky用法

• position:sticky 被稱爲粘性定位元素（stickily positioned element）是計算後位置屬性爲 sticky 的元素。
• 簡單的理解就是：在目標區域之內，它的行爲就像 position:relative;在滑動過程當中，某個元素距離其父元素的距離達到sticky粘性定位的要求時(好比top：100px)；position:sticky這時的效果至關於fixed定位，固定到適當位置。
• 能夠說是相對定位relative和固定定位fixed的結合
• 元素固定的相對偏移是相對於離它最近的具備滾動框的祖先元素，若是祖先元素都不能夠滾動，那麼是相對於viewport來計算元素的偏移量。

position:sticky 使用條件

1.父元素不能overflow:hidden或者overflow:auto屬性。

2.必須指定top、bottom、left、right4個值之一，不然只會處於相對定位

3.父元素的高度不能低於sticky元素的高度

四、sticky元素僅在其父元素內生效

例子

• 當鼠標下滑到必定高度時，觸發position:sticky定位的要求，讓「流行，新款，精選」固定爲距離頂部44px的地方。

  

• css代碼

.tab-control{
  position: sticky;
  top: 44px;
}
複製代碼

• html區域

<tab-control class="tab-control" :titles="['流行','新款','精選']"></tab-control>
複製代碼

在web開發中注意兼容性：

sticky目前還是一個試驗性的屬性，並非W3C推薦的標準。它之因此會出現，也是由於監聽scroll事件來實現粘性佈局使瀏覽器進入慢滾動的模式，這與瀏覽器想要經過硬件加速來提高滾動的體驗是相悖的。具體狀況能夠看下圖，基本上能夠說這個屬性使用的瀏覽器只有FireFox和iOS的Safari

使用sticky容易遇到的「坑」

• 1.sticky不會觸發BFC，

• 2.z-index無效，

• 3.當父元素的height：100%時，頁面滑動到必定高度以後sticky屬性會失效。

• 4.IE低版本不支持sticky的使用

小程序自定義導航欄中使用sticky:

sticky是能夠再小程序端生效的！ 親測這個屬性在自定義導航時特別適用