固定層不隨滾動條滾動而滾動(純CSS,相容IE6,IE7,IE8,Firefox,Safari)
阿新 • • 發佈：2019-01-25
使用CSS來固定層，此層不隨滾動條滾動而滾動，固定層分三個位置：
頁面頂端：
頁面中央：
頁面底層：
StaticContent.css檔案：
/*******呼叫<div id="fiexd-headerIE6"></div>***********/ /********解決內容一跳一跳的Bug(適用於IE6)*******/ html,body{ background:url(nothing.txt) white fixed; /* prevent screen flash in IE6 */ margin:0; padding:0; } /**********內容不隨滾動條動(只適用IE6)********/ /****在頁面頂部******/ #fiexd-headerIE6{ background:#66CCCC; /*背景顏色*/ color:#FFFFFF; /*文字顏色*/ border-top:2px solid #336699; /*上方邊框*/ border-bottom:2px solid #336699; /*下方邊框*/ width:100%; /*寬度*/ position:fixed; /*固定位置定位*/ /* left:0;*如果沒有橫向滾動條，可以設定該值/ top:0; /*距離上方 0 畫素*/ z-index:1; /*重疊時會在其他元素之上*/ _position:absolute; /*IE6*/ _top:expression(documentElement.scrollTop+"px"); /*IE6*/ } /****在頁面中央*******/ #fixed-centerIE6{ background:#FFFF99; color:#FF6600; font-weight:bold; border:1px solid #990000; padding:10px; width:400px; height:200px; position:fixed; top:50%; left:50%; margin-top:-100px; margin-left:-200px; _position: absolute; /* position fixed for IE6 */ _top:expression(documentElement.scrollTop+(documentElement.clientHeight-this.clientHeight)/2); _margin-top:0; } /*****在頁面右邊********/ #fixed-rightIE6{ background:#FF0066; color:#FFCC99; border:4px solid #FF9999; padding:5px; width:80px; height:120px; position:fixed; top:100px; right:10px; _position: absolute; /* position fixed for IE6 */ _top:expression(documentElement.scrollTop+100); z-index:3; } /*****在頁面底部******/ #fixed-footerIE6{ background:#CC99CC; color:#333333; text-align:center; border:2px solid #999999; padding:5px; width:600px; position:fixed; bottom:0; left:50%; margin-left:-300px; _position: absolute; /* position fixed for IE6 */ _top:expression(documentElement.scrollTop+documentElement.clientHeight-this.clientHeight-4); z-index:4; } /******使用 IE 7、Firefox 或 Safari 瀏覽器來測試，都已經能夠達到我們想要的效果。*****/ /***在頁面頂部****/ #fiexd-header { background:#66CCCC; /*背景顏色*/ color:#FFFFFF; /*文字顏色*/ border-top:2px solid #336699; /*上方邊框*/ border-bottom:2px solid #336699; /*下方邊框*/ width:100%; /*寬度*/ position:fixed; /*固定位置定位*/ top:0; /*距離上方 0 畫素*/ z-index:1; /*重疊時會在其他元素之上*/ } /****顯示頁面中央****/ #fixed-center{ background:#FFFF99; color:#FF6600; font-weight:bold; border:1px solid #990000; padding:10px; width:400px; height:200px; position:fixed; /*固定位置定位*/ top:50%; /*距離上方的位置*/ left:50%; /*距離左方的位置*/ margin-top:-100px; /*上方邊界*/ margin-left:-200px; /*左方邊界*/ } /*****在頁面底部******/ #fixed-footer{ background:#CC99CC; color:#333333; text-align:center; border:2px solid #999999; padding:5px; width:600px; position:fixed; bottom:0; left:50%; margin-left:-300px; position:fixed; z-index:4; }
前臺程式碼：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JSLibraryDemo.aspx.cs" Inherits="JSLibraryDemo" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>JS類庫測試</title> <link rel="Stylesheet" type="text/css" href="css/StaticContent.css" /> </head> <body> <form id="form1" runat="server"> <div id="fixed-footer">此層不隨滾動條動</div> <br /> 此內容隨滾動條動 <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> </form> </body> </html>