固定层不随滚动条滚动而滚动(纯CSS,兼容IE6,IE7,IE8,Firefox,Safari)

来源：互联网发布：数据库物理层编辑：程序博客网时间：2024/06/09 13:36

使用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>

0 0