最近認識到position: sticky;這個比較新的css屬性.功能就如字面意思
定位: 粘性;
用這個新屬性做 固定頂部 的功能,簡直是溼溼碎
作為新屬性,簡單介紹下它的特性:
實踐出真知,實際用一下就知道怎麼回事
position: sticky粘性定位title
>
type
="text/css"
>
*.box1
.box2
._sticky
._sticky1
.grid
.box1 .grid
.box2 .grid
style
>
head
>
>
class
="box1"
>
class
="grid"
>
div>
class
="grid"
>
div>
class
="grid"
>
div>
class
="_sticky grid"
>
粘性定位div
>
class
="grid"
>
div>
class
="grid"
>
div>
class
="_sticky1 grid"
>
粘性定位1div
>
class
="grid"
>
div>
class
="grid"
>
div>
class
="grid"
>
div>
class
="grid"
>
div>
class
="grid"
>
div>
div>
class
="box2"
>
class
="grid"
>
div>
class
="grid"
>
div>
class
="grid"
>
div>
class
="_sticky grid"
>
粘性定位div
>
class
="grid"
>
div>
class
="grid"
>
div>
class
="_sticky1 grid"
>
粘性定位1div
>
class
="grid"
>
div>
class
="grid"
>
div>
class
="grid"
>
div>
class
="grid"
>
div>
class
="grid"
>
div>
div>
class
="grid"
>
div>
class
="grid"
>
div>
class
="grid"
>
div>
class
="grid"
>
div>
class
="grid"
>
div>
class
="grid"
>
div>
body
>
html
>
截止2023年3月6日,它的相容性如下
據筆者經驗,手機端多少有些不可預期的情況,請結合實際需求選用
end
vue之粘性定位元件
class classname style sticky div slot div div template export default zindex classname data mounted activated destroyed methods this position fixed th...
CSS position sticky 踩坑筆記
在二次開發主題的過程中，發現了很多問題。其中技術點不高，但讓人瞬gan 的就是這一條css屬性。position sticky是css定位新增屬性 可以說是相對定位relative和固定定位fixed的結合 它主要用在對scroll事件的監聽上 簡單來說，在滑動過程中，某個元素距離其父元素的距離達到...
粘性布局position sticky
開篇 頁面開發中常用到固定定位fixed，不過fixed會浮動脫離文件流，於是又要清除浮動，即麻煩有時又未必能夠清除浮動，於是sticky華麗出場 介紹 sticky是css3中新增的position屬性，設定了sticky的元素，在螢幕範圍 viewport 內該元素的位置並不受到定位影響 設定是...