滾動頁面,實現導航欄固定在頂部(吸頂效果)

2021-09-06 15:57:36 字數 1625 閱讀 9994

內容說明頁面中有導航欄,當頁面滾動超出一定範圍時,它會固定在設定好的位置,一般是固定在頂部。

本文有兩種方式實現,一種是sticky,相容不好;另外一種是sticky的解體。。相容效果萬能

sticky頁面不動的情況下,它就像 position:relative;

而當頁面滾動超出目標區域時,它表現的就像 position:fixed;,會固定在目標位置。

relative(相對定位)是指給元素設定相對於原本位置的定位,元素並不脫離文件流,因此元素原本的位置會被保留,其他的元素位置也不會受到影響。

而fixed:表示固定定位,與absolute定位型別類似,但它的相對移動的座標並不是body,而是檢視(螢幕內的網頁視窗)本身。

主要用在對scroll事件的監聽上;在滑動過程中,某個元素距離其父元素的距離達到sticky粘性定位的要求時(比如top:0);position:sticky這時的效果相當於fixed定位,固定在(top: 0)位置。

特點

1)該元素並不脫離文件流,仍然保留元素原本在文件流中的位置。

2)當元素在容器中被滾動超過指定的偏移值時,元素在容器內固定在指定位置。亦即如果你設定了top: 50px,那麼在sticky元素到達距離相對定位的元素頂部50px的位置時固定,不再向上移動。

3)元素固定的相對偏移是相對於離它最近的具有滾動框的祖先元素,如果祖先元素都不可以滾動,那麼是相對於可視視窗來計算元素的偏移量

用法

position: sticky;

position: -webkit-sticky; // 相容 -webkit 核心的瀏覽器

top: 10px; // 必須設乙個值,否則不生效

只需要三行**就能實現吸頂效果

只是目前這個屬性並不是w3c推薦的標準,所以目前相容性還不是很好。

emmm…這一大片紅 就看出sticky相容性很差了

說到了sticky粘性定位的原理 是結合了relative和fixed的特點

既然瀏覽器對sticky支援不友好,那就用**把他倆動態切換達到結合的效果(relative和fixed是不分瀏覽器的)

思路:

前提時需要監聽scroll事件

1)滾動條不動時,是靜態相對定位狀態relative

2)當頁面滾動超出設定距離時,js改變樣式屬性 切換定位狀態變成fixed,同時再給top設定乙個值

css部分

// 滾動條不動時

.box

// 監聽到滾動條開始滾動後的樣式

.box-active

js部分

// 監聽事件

window.addeventlistener('scroll', function()else

})

這樣就可以相容所有瀏覽器了,也不是很麻煩,效果兩種是一樣

android 進入頁面時讓焦點固定在頂部

頁面用scrollview整體滑動,巢狀自定義gridview進入頁面時總是顯示在最底部,要想換成頁面頂部需要解決焦點搶占問題 在該頁面布局檔案的根布局中設定descendantfocusability這一屬性android descendantfocusability blocksdescenda...

滾動時固定在頂部 滾動軸承機械的故障機理及振動診斷

滾動軸承振動故障 4.2 滾動軸承故障的譜圖診斷 4.2.1幅值診斷 4.2.1.1峰值診斷 峰值是波形中的最大值,峰值的大小可以用來反映滾動軸承某一區域性故障點的衝擊力大小。衝擊力愈大,峰值愈高,因此在檢測由剝落 裂紋 膠合 壓痕 凹坑等原因所造成的衝擊性振動時,峰值xp比有效值xrms更能明顯地...

CSS實現footer固定在頁面底部

作為乙個頁面仔你一定遇到過 當乙個html頁面中含有較少的內容時,web頁面的 footer 部分隨著飄上來,處在頁面的半腰中間,給視覺效果帶來極大的影響,讓你的頁面看上去很不好看,特別是現在寬屏越來越多,這種現象更是常見。那麼如何將web頁面的 footer 部分永遠固定在頁面的底部呢?先來看下下...