滾動頁面，實現導航欄固定在頂部（吸頂效果）

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

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

而當頁面滾動超出目標區域時，它表現的就像 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 部分永遠固定在頁面的底部呢？先來看下下...