這篇文章主要介紹了CSS中position屬性sticky的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
在開(kāi)發(fā)移動(dòng)端app時(shí)，經(jīng)常會(huì)碰到需要這樣一種情況 —— 網(wǎng)站滾動(dòng)到一定高度的時(shí)候，讓一部分內(nèi)容作為navbar，也就是置頂顯示，我們一般會(huì)使用js監(jiān)聽(tīng)scroll事件來(lái)實(shí)現(xiàn)，但是新增的css屬性position:sticky可以簡(jiǎn)單實(shí)現(xiàn)
我不是最后一個(gè)知道的：position: sticky
position的含義是指定位類(lèi)型，取值類(lèi)型可以有：static、relative、absolute、fixed、inherit和sticky，這里sticky是CSS3新發(fā)布的一個(gè)屬性。我今天重點(diǎn)要說(shuō)的就是sticky屬性
position:sticky用法
position:sticky 被稱(chēng)為粘性定位元素（stickily positioned element）是計(jì)算后位置屬性為 sticky 的元素。
簡(jiǎn)單的理解就是：在目標(biāo)區(qū)域以內(nèi)，它的行為就像 position:relative;在滑動(dòng)過(guò)程中，某個(gè)元素距離其父元素的距離達(dá)到sticky粘性定位的要求時(shí)(比如top：100px)；position:sticky這時(shí)的效果相當(dāng)于fixed定位，固定到適當(dāng)位置。
可以說(shuō)是相對(duì)定位relative和固定定位fixed的結(jié)合
元素固定的相對(duì)偏移是相對(duì)于離它最近的具有滾動(dòng)框的祖先元素，如果祖先元素都不可以滾動(dòng)，那么是相對(duì)于viewport來(lái)計(jì)算元素的偏移量。
position:sticky 使用條件
1.父元素不能overflow:hidden或者overflow:auto屬性。 2.必須指定top、bottom、left、right4個(gè)值之一，否則只會(huì)處于相對(duì)定位 3.父元素的高度不能低于sticky元素的高度 4、sticky元素僅在其父元素內(nèi)生效
例子
當(dāng)鼠標(biāo)下滑到一定高度時(shí)，觸發(fā)position:sticky定位的要求，讓“流行，新款，精選”固定為距離頂部44px的地方。
css代碼
重慶分公司
重慶分公司
.tab-control{
position: sticky;
top: 44px;
}html區(qū)域
在web開(kāi)發(fā)中注意兼容性：
sticky目前仍是一個(gè)試驗(yàn)性的屬性，并不是W3C推薦的標(biāo)準(zhǔn)。它之所以會(huì)出現(xiàn)，也是因?yàn)楸O(jiān)聽(tīng)scroll事件來(lái)實(shí)現(xiàn)粘性布局使瀏覽器進(jìn)入慢滾動(dòng)的模式，這與瀏覽器想要通過(guò)硬件加速來(lái)提升滾動(dòng)的體驗(yàn)是相悖的。具體情況可以看下圖，基本上可以說(shuō)這個(gè)屬性使用的瀏覽器只有FireFox和iOS的Safari
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS中position屬性sticky的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
