css粘性定位sticky的使用

2022-07-02 23:15:11 字數 606 閱讀 6278

在做h5頁面的過程中,經常會遇到這種情況,頁面滾動到一定位置的時候,那個元素需要固定在頂部,之前都是用js去計算再實現,其實用css來實現更加方便

html:

<

div>

<

p>粘性定位

p>

div>

css:

div

p

頁面滾動到div的位置的時候,p元素就會浮動固定在頂部,超出div就不浮動了。

實際專案中可能還有其他的需求,例如p元素裡面有很多子元素,點選哪個子元素就要滾動到指定的模組位置,或者是滾動到哪個模組位置的時候,p元素的對應子元素就要有選中效果。這種一般就要用js來實現。後面寫個例子補上

補上js處理的例子:

在methods中新增監聽事件handlescroll

handlescroll() 

},

在mounted仲新增滾動監聽

mounted() ,

在destroyed中移除滾動監聽

destroyed() ,

思路大概是這樣,後面怎麼操作就看具體需求

sticky,粘性定位

position sticky,粘性定位 可以說是relative和fixed的結合 滑動過程中,元素在顯示視窗內則在其本身的位置,超出元素所在位置則顯示在設定的sticky位置。使用 id 設定position sticky,上下定位給乙個 top,bottom,right,left 之一即可 左...

css屬性sticky(粘性定位)固定導航

sticky 粘性定位 解釋 粘性定位可以被認為是相對定位和固定定位的混合。元素在跨越特定閾值前為相對定位,之後為固定定位。設定該屬性的元素並不脫離文件流,仍然保留元素原本在文件流中的位置。使用sticky實現固定導航頭部在以前,我們實現的主要思路就是使用js監聽頁面滾動事件,然後判斷導航距離頂部的...

CSS 定位 靜態 絕對 相對 固定 粘性定位

提問 以下情況使用標準流或者浮動能實現嗎?某個元素可以自由的在乙個盒子內移動位置,並且壓住其他盒子.提問 以下情況使用標準流或者浮動能實現嗎?當我們滾動視窗的時候,盒子是固定螢幕某個位置的。以上效果,標準流或浮動都無法快速實現,此時需要定位來實現。所以 浮動可以讓多個塊級盒子一行沒有縫隙排列顯示,經...