sticky 粘性布局

2021-09-26 08:41:42 字數 713 閱讀 9652

position: sticky;

sticky的中文意思是「粘性的」,position:sticky表現也符合這個粘性的表現。特別適合導航的跟隨定位效果。

基本上,可以看出是position:relative和position:fixed的結合體——當元素在螢幕內,表現為relative,就要滾出顯示器螢幕的時候,表現為fixed。

position:sticky有個非常重要的特性,那就是sticky元素效果完全受制於父級元素們。

這和position:fixed定位有著根本性的不同,fixed元素直抵頁面根元素,其他父元素對其left/top定位無法限制。

sticky元素以下一些特性表現:

父級元素不能有任何overflow:visible以外的overflow設定,否則沒有粘滯效果。

因為改變了滾動容器(即使沒有出現滾動條)。

因此,如果你的position:sticky無效,看看是不是某乙個祖先元素設定了overflow:hidden,移除之即可。

父級元素也不能設定固定的height高度值,否則也沒有粘滯效果。

同乙個父容器中的sticky元素,如果定位值相等,則會重疊;

如果屬於不同父元素,則會鳩佔鵲巢,擠開原來的元素,形成依次佔位的效果。

sticky定位,不僅可以設定top,基於滾動容器上邊緣定位;

還可以設定bottom,也就是相對底部粘滯。如果是水平滾動,也可以設定left和right值。

sticky,粘性定位

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

EventBus 使用 Sticky粘性傳值事件

eventbus 使用基本步驟 依賴 implementation org.greenrobot eventbus 3.0.0 1.註冊與解除註冊 override fun onstart override fun onstop 2.建立訊息類 class eventmessbean 3.傳送 ev...

css粘性定位sticky的使用

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