在一般的**中都會有頭部和頁尾。
頭部會一直固定在最上面位置。
頁尾呢，當頁面內容超出一屏時，頁尾在內容最後，當不足一屏時，在頁面最下面。
實現方式有很多。這裡使用的是 position:sticky;
sticky 粘性定位。是css新增的乙個position屬性。
為什麼說是粘性定位，從適用場景來看：一開始顯示，滾動到一定位置需要顯示的元素。
在沒有達到設定的粘著位置時，和正常元素一樣，達到粘著距離，就好一直保持這個位置。
使用注意事項：
1、父元素不能有 overflow 屬性
2、left、top、right、bottom 必須要有乙個
3、僅在父元素內生效，父元素的高度必須大於 sticky 元素高度
4、相容加 -webkit 字首
下面是最簡單的 header 使用：
.header
下面是實現，頭部和頁尾的滾動和固定。
html 部分：
<div
class
="layout"
>
<
div
class
="header"
>
div>
<
div
class
="footer"
>
div>
div>
css 部分：
.layout .footer }
導航選單固定頭部跟隨螢幕滾動jQuery外掛程式
function extend settings,configsettings initial if browser.msie browser.version 6.0 var obj this var initpos obj offset top var initposleft obj offset...
頁面頭部和底部固定
說明 設定body的padding屬性padding top 16px padding bottom 16px，使頁面上下留有16px的空白。然後設定 header和 footer的絕對位置和高度。設定 content的 overflow auto。試著改變這幾個引數，一用就明白 header fo...
在移動Web頁面中使用CSS固定頁尾
一種單頁應用的頁面結構 面向移動端的單頁應用 single page web application 從頁面 上來說，會使用較一般網頁不同的結構。單頁應用並不是說應用只需要乙個檢視，而是說可以將組成應用的多個檢視集合在乙個網頁內呈現，且在檢視之間能夠自由切換 平滑的動畫形式居多 我製作單頁應用使用的...