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

2021-09-29 21:34:03 字數 609 閱讀 6492

sticky(粘性定位)解釋:

粘性定位可以被認為是相對定位和固定定位的混合。元素在跨越特定閾值前為相對定位,之後為固定定位。設定該屬性的元素並不脫離文件流,仍然保留元素原本在文件流中的位置。

使用sticky實現固定導航頭部在以前,我們實現的主要思路就是使用js監聽頁面滾動事件,然後判斷導航距離頂部的距離,為其動態新增position:fixed屬性,這樣寫起來相對麻煩,並且實現的效果也不是很理想(滾動會有抖動),如果用sticky屬性將變得非常容易,並且實現效果會更好。

實現**

最終效果

目前不友好的地方(相容性)

sticky,粘性定位

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

css粘性定位sticky的使用

在做h5頁面的過程中,經常會遇到這種情況,頁面滾動到一定位置的時候,那個元素需要固定在頂部,之前都是用js去計算再實現,其實用css來實現更加方便 html div p 粘性定位 p div css div p 頁面滾動到div的位置的時候,p元素就會浮動固定在頂部,超出div就不浮動了。實際專案中...

sticky 粘性布局

position sticky sticky的中文意思是 粘性的 position sticky表現也符合這個粘性的表現。特別適合導航的跟隨定位效果。基本上,可以看出是position relative和position fixed的結合體 當元素在螢幕內,表現為relative,就要滾出顯示器螢幕...