由於 IE6,7 不能支持 position:fix , 不希望使用 Javascript 唯有使用特殊寫法.
舉例, HTML 內文為
Step 1.
[html]
<body>
<div id="nav_bar">雷打不動</div>
<div id="body_wrap">
很多內容…很多內容…很多內容…很多內容…
很多內容…很多內容…很多內容…很多內容…
很多內容…很多內容…很多內容…很多內容…
很多內容…很多內容…很多內容…很多內容…
很多內容…很多內容…很多內容…很多內容…
很多內容…很多內容…很多內容…很多內容…
</div>
</body>
[/html]
目的是 nav_bar 永遠處於畫面特定位置,
整個 HTML 架構只能有一個 nav_bar 及一個 body_warp.
要注意把所有 “現在及末來有可能出現的文章” 存於 body_wrap 中.
然後才是
Step 2.
[css]
#nav_bar{
display:block;
position: fixed;
top: 100px;left: 0px;width: 100%;height: 150px;
background: #CCC;
/* IE 才能讀取下面 並 override 原有參數值 */
>position: absolute;
>z-index: 99;
}
#body_warp{
display:block;
margin:0px;
padding:0px;
/* IE 才能讀取下面 並 override 原有參數值 */
>top:0px;
>left:0px;
>width:100%; /* 取得 body width & height */
>height:100%;
>z-index:1; /* 低於 nav_bar 層級 */
>overflow: auto; /* 取代 body 原有的 scroll 使用文能夠捲動 */ }
body{
/* Css hack, 加入 width height 參數於 body */
width:100%; height:100%;
/* 只有 IE 系列才作用*/
>overflow:hidden; /* 不能使用 body 原有的 scroll 控制. */
}
[/css]
本 hack 的唯一缺點就是, 只能把內容及辛章排版等等皆存放於 body_wrap 中.
而且 IE 中使用本方式捲動大量 object, 佔的 CPU 很多, 畢竟每一下需要重新運算 child 中所有坐標.
同樣的方式可製作 position:fix 的 background , 而且作成 auto full size;
[css]
/*
<div id="fix_bg"><img src="xxxx.jpg" /></div>
*/
body{
/* By http://css-tricks.com/perfect-full-page-background-image/ */
background: url(xxxxxx.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.fix_bg{
display:none !important; /* 支援 important 的瀏覽器用上面的就好 */
display:block;
position: fixed;
top: 0px;left: 0px;width: 100%;height: 100%;
/* IE 才能讀取下面 並 override 原有參數值 */
>position: absolute;
>z-index: 0; /* 低於 body_wrap */
}
.fix_bg img{
width: 100%; /* 以寬度為準 */
min-height: 100%;
>height: 100%;
overflow: hidden;
}
[/css]
