如何讓tab滑動到頂端置頂

2021-10-01 08:32:46 字數 782 閱讀 1536

之前做專案的時候遇到乙個需求:

tab切換欄滑動到頂端的時候置頂不動,當再次下滑的時候恢復原狀。

當時為了做這個功能,還特意去監聽了瀏覽器的滾動,當滾動到特定位置的時候,讓隱藏的置頂的tab(和標準文件流裡的tab內容一樣)顯示。

現在發現了乙個css屬性可以快速實現這個功能,那就是:position:sticky;

粘性(sticky)定位可以被認為是相對定位(relative)和固定定位(fixed)的混合。

元素在跨越特定閾值前為相對定位,之後為固定定位。

須指定 top, right, bottom 或 left 四個閾值其中之一,才可使粘性定位生效,否則其行為與相對定位相同。

簡單點說就是:

當元素在螢幕內,表現為relative,就要滾出顯示器螢幕的時候,表現為fixed。

position:sticky;的效果受制於父級元素們,有如下特性:

1.父級元素不能有任何overflow:visible以外的overflow設定,否則失去粘滯效果;

2.父級元素也不能設定固定的height高度,否則也失去粘滯效果;

3.同乙個父容器中的sticky元素,如果定位值相同會重疊在一起;如果屬於不同父容器,則會擠開原來的元素,形成依次佔位的效果;

4.sticky定位,不僅可以設定top,還可以設定bottom、left和right值。

遺憾的是ie不支援這個css屬性,所以需要相容ie的同學只能放棄它了。而safari目前還需要-webkit-私有字首。

監聽ScrollView滑動到頂端和底部

mainactivity如下 package cn.testscrollview import android.os.bundle import android.view.motionevent import android.view.view import android.view.view.on...

android去掉滑動到頂部和底部的陰影

listview android id id listview android layout width match parent android layout height wrap content android cachecolorhint 00000000 android divider c...

仿美團app,浮動layout滑動到頂部懸停效果

說明原理 好,看完效果圖之後,我們來看一下這個效果的設計原理。首先,我們來看一張整體的設計圖 設計效果圖是分為三個部分 頂部區域 浮動區域a 列表區域。1.當螢幕往上面滑動的時候,互動區域a也跟著滑動 2.當浮動區域a滑動到頂部的時候,浮動區域a停留在頂部 上右圖 3.當螢幕往下滑動的時候,浮動區域...