在開發(fā)移動端app時，經(jīng)常會碰到需要這樣一種情況 —— 網(wǎng)站滾動到一定高度的時候，讓一部分內(nèi)容作為navbar，也就是置頂顯示，我們一般會使用js監(jiān)聽scroll事件來實現(xiàn)，但是新增的css屬性position:sticky可以簡單實現(xiàn)

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

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

position:sticky用法

• position:sticky 被稱為粘性定位元素（stickily positioned element）是計算后位置屬性為 sticky 的元素。
• 簡單的理解就是：在目標(biāo)區(qū)域以內(nèi)，它的行為就像 position:relative;在滑動過程中，某個元素距離其父元素的距離達(dá)到sticky粘性定位的要求時(比如top：100px)；position:sticky這時的效果相當(dāng)于fixed定位，固定到適當(dāng)位置。
• 可以說是相對定位relative和固定定位fixed的結(jié)合
• 元素固定的相對偏移是相對于離它最近的具有滾動框的祖先元素，如果祖先元素都不可以滾動，那么是相對于viewport來計算元素的偏移量。  

position:sticky 使用條件

1.父元素不能overflow:hidden或者overflow:auto屬性。 2.必須指定top、bottom、left、right4個值之一，否則只會處于相對定位 3.父元素的高度不能低于sticky元素的高度 4、sticky元素僅在其父元素內(nèi)生效

例子

當(dāng)鼠標(biāo)下滑到一定高度時，觸發(fā)position:sticky定位的要求，讓“流行，新款，精選”固定為距離頂部44px的地方。

css代碼

.tab-control{
  position: sticky;
  top: 44px;
}

html區(qū)域

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

在web開發(fā)中注意兼容性：

sticky目前仍是一個試驗性的屬性，并不是W3C推薦的標(biāo)準(zhǔn)。它之所以會出現(xiàn)，也是因為監(jiān)聽scroll事件來實現(xiàn)粘性布局使瀏覽器進(jìn)入慢滾動的模式，這與瀏覽器想要通過硬件加速來提升滾動的體驗是相悖的。具體情況可以看下圖，基本上可以說這個屬性使用的瀏覽器只有FireFox和iOS的Safari

總結(jié)

到此這篇關(guān)于CSS中的 position屬性sticky詳解的文章就介紹到這了,更多相關(guān)css position屬性sticky內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論