浮动层不固定，求解决办法
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="stlye.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
window.onload=function(){
var nav=document.getElementById('nav');
var navFixed=document.getElementById('navFixed');
window.onscroll=function(){
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
document.title=scrollTop
if(scrollTop>nav.offsetTop){
navFixed.style.display='block';
}else if(scrollTop<nav.offsetTop){
navFixed.style.display='none';
}
}
};
</script>
<style type="text/css">
<!--
body{/* 全局 */
padding:0px;/* 内边距0像素 */
margin:0px;/* 外边距0像素 */
}
.header{
width:100%;/* 宽度为100% */
}
.header{
width:100%;/* 宽度为100% */
height:20px;/* 高度为20像素 */
}
*{
margin:0; /* 外边距0像素 */
padding:0;/* 内边距0像素 */
}
.nav-wrapper-fixed{
position:fixed; /* 用来浮动定位 */
top:0; /* 距离顶部0像素 */
width:1002px;/* 宽度100% */
height:20px;/* 高度30像素 */
background:#ffffff;/* 背景颜色为#000000 */
margin:0 auto;
left:auto;
}
.nav-wrapper-fixed .nav{
width:1002px; /* 宽度960像素 */
margin:0 auto;/* 上下外边距为0像素，左右为自动，即居中 */
}
.nav-wrapper-fixed .nav1{
widht:1002px;/* 宽度 */
margin:0 auto;/* 上下外边距为0像素，左右为自动，即居中 */
}
.nav-wrapper-fixed .sitenav-left {
MARGIN-TOP: 3px; /* 上边界 */
FLOAT: left;/* 左浮动 */
}
.nav-wrapper-fixed .navright {
margin-top:3px; /* 上边界 */
float:right;/* 右浮动 */
}
.nav-wrapper-fixed .sitenav-left LI {
FLOAT: left;/* 左浮动 */
font-size:12px;/* 字体大小 */
list-style:none;/* li元素去点 */
}
.nav-wrapper-fixed .navright li {
float:left;/* 左浮动 */
font-size:12px;/* 字体大小 */
list-style:none;/* li元素去点 */
}
.nav-wrapper-fixed .sitenav-left .aimei {
MARGIN-RIGHT: 20px;/* 右边距 */
}
.nav-wrapper-fixed .navright .denglu {
margin-right:0px;/* 右边距 */
}
.nav-wrapper-fixed .sitenav-left .aimei A:link {
COLOR: #c36;/* 颜色 */
}
.nav-wrapper-fixed .sitenav-left .aimei A:visited {
COLOR: #c36/* 颜色 */
}
.nav-wrapper-fixed .sitenav-left .mama {
MARGIN-RIGHT: 30px/* 右边距 */
}
.nav-wrapper-fixed .navright .zhuche {
margin-right:0px; /* 右边距 */
HEIGHT: 19px;/* 高 */
MARGIN: 0px 5px; /* 边距 */
PADDING-LEFT: 8px; /* 左边距 */
DISPLAY: inline; /* 行元素，加上后多行变单行 */
BACKGROUND: url(site-nav-new.png) no-repeat 0px -115px/* 背景 */
}
.nav-wrapper-fixed .sitenav-left .sinaweibo {
MARGIN: 0px 5px; /* 边距 */
DISPLAY: inline/* 行元素，加上后多行变单行 */
}
.nav-wrapper-fixed .navright .bbs {
MARGIN: 0px 5px; /* 边距 */
PADDING-LEFT: 8px; /* 边距 */
DISPLAY: inline; /* 行元素，加上后多行变单行 */
BACKGROUND: url(site-nav-new.png) no-repeat 0px -115px/* 背景 */
}
.nav-wrapper-fixed .sitenav-left .sinaweibo A {
WIDTH: 24px; /* 宽度 */
DISPLAY: block; /* 块元素 */
HEIGHT: 19px/* 高度 */
}
.nav-wrapper-fixed .sitenav-left .weixin {
POSITION: relative;
MARGIN: 0px 5px;
PADDING-LEFT: 8px;
DISPLAY: inline;
BACKGROUND: url(site-nav-new.png) no-repeat 0px -115px
}
.nav-wrapper-fixed .sitenav-left .weixin SPAN {
Z-INDEX: 1000;
POSITION: relative;
WIDTH: 24px;
DISPLAY: block;
BACKGROUND: url(../images/sitenav.png) no-repeat -25px 0px; HEIGHT: 19px
}
.nav-wrapper-fixed .sitenav-left .weixin #weixin-pic {
Z-INDEX: 1000;
POSITION: absolute;
DISPLAY: none;
TOP: 19px;
LEFT: -100px
}
.nav-wrapper-fixed .sitenav-left .mobile {
MARGIN: 0px 5px;
PADDING-LEFT: 8px;
DISPLAY: inline;
BACKGROUND: url(site-nav-new.png) no-repeat 0px -115px
}
.nav-wrapper-fixed .sitenav-left .mobile A {
HEIGHT: 21px
}
.nav-wrapper{
margin-top:0px; /* 上外边距为0像素 */
width:1002px;/* 宽度为100% */
height:20px;/* 高度为30像素 */
background:#ffffff;/* 背景为#000000颜色 */
margin:0 auto;
}
.nav-wrapper .nav{
width:1002px; /* 宽度为960像素 */
margin:0 auto;/* 上下外边距为0像素，左右为自动，即居中 */
}
.nav-wrapper .nav1{
widht:1002px;/* 宽度 */
margin:0 auto;/* 上下外边距为0像素，左右为自动，即居中 */
}
.nav-wrapper .sitenav-left {
MARGIN-TOP: 3px; /* 上边界 */
FLOAT: left;/* 左浮动 */
}
.nav-wrapper .navright {
margin-top:3px; /* 上边界 */
float:right;/* 右浮动 */
}
.nav-wrapper .sitenav-left LI {
FLOAT: left;/* 左浮动 */
font-size:12px;/* 字体大小 */
list-style:none;/* li元素去点 */
}
.nav-wrapper .navright li {
float:left;/* 左浮动 */
font-size:12px;/* 字体大小 */
list-style:none;/* li元素去点 */
}
.nav-wrapper .sitenav-left .aimei {
MARGIN-RIGHT: 20px;/* 右边距 */
}
.nav-wrapper .navright .denglu {
margin-right:0px;/* 右边距 */
}
.nav-wrapper .sitenav-left .aimei A:link {
COLOR: #c36;/* 颜色 */
}
.nav-wrapper .sitenav-left .aimei A:visited {
COLOR: #c36/* 颜色 */
}
.nav-wrapper .sitenav-left .mama {
MARGIN-RIGHT: 30px/* 右边距 */
}
.nav-wrapper .navright .zhuche {
margin-right:0px; /* 右边距 */
HEIGHT: 19px;/* 高 */
MARGIN: 0px 5px; /* 边距 */
PADDING-LEFT: 8px; /* 左边距 */
DISPLAY: inline; /* 行元素，加上后多行变单行 */
BACKGROUND: url(site-nav-new.png) no-repeat 0px -115px/* 背景 */
}
.nav-wrapper .sitenav-left .sinaweibo {
MARGIN: 0px 5px; /* 边距 */
DISPLAY: inline/* 行元素，加上后多行变单行 */
}
.nav-wrapper .navright .bbs {
MARGIN: 0px 5px; /* 边距 */
PADDING-LEFT: 8px; /* 边距 */
DISPLAY: inline; /* 行元素，加上后多行变单行 */
BACKGROUND: url(site-nav-new.png) no-repeat 0px -115px/* 背景 */
}
.nav-wrapper .sitenav-left .sinaweibo A {
WIDTH: 24px; /* 宽度 */
DISPLAY: block; /* 块元素 */
HEIGHT: 19px/* 高度 */
}
.nav-wrapper .sitenav-left .weixin {
POSITION: relative;
MARGIN: 0px 5px;
PADDING-LEFT: 8px;
DISPLAY: inline;
BACKGROUND: url(site-nav-new.png) no-repeat 0px -115px
}
.nav-wrapper .sitenav-left .weixin SPAN {
Z-INDEX: 1000;
POSITION: relative;
WIDTH: 24px;
DISPLAY: block;
BACKGROUND: url(../images/sitenav.png) no-repeat -25px 0px; HEIGHT: 19px
}
.nav-wrapper .sitenav-left .weixin #weixin-pic {
Z-INDEX: 1000;
POSITION: absolute;
DISPLAY: none;
TOP: 19px;
LEFT: -100px
}
.nav-wrapper .sitenav-left .mobile {
MARGIN: 0px 5px;
PADDING-LEFT: 8px;
DISPLAY: inline;
BACKGROUND: url(site-nav-new.png) no-repeat 0px -115px
}
.nav-wrapper .sitenav-left .mobile A {
HEIGHT: 21px
}
a.top2clj:link{
color:#333333;/* 颜色 */
text-decoration:none;/* 无下划线 */
}/* 超链接初始状态 */
a.top2clj:hover{
color:#c36;/* 颜色 */
text-decoration:underline;/* 有下划线 */
}/* 鼠标移动到超链接状态 */
a.top2clj:visited{
color:#333333;/* 颜色 */
text-decoration:none;/* 无下划线 */
} /*浏览过的链接状态*/
a.top2clj:active{
color:#c36;/* 颜色 */
text-decoration:underline;/* 有下划线 */
}/* 鼠标点击超链接时状态 */
-->
</style>
</head>
<body style="height:2222px;">
<div class="header">
<div class="header-top">
<div class="nav-wrapper">
<div class="nav" id="nav">
<ul class="sitenav-left">
<li class="aimei"><a href="#" target="_blank">爱美网</a></li>
<li class="mama"><a href="#" target="_blank" class="top2clj">爱美妈妈网</a></li>
<li class="sinaweibo"><a href="#" target="_blank" class="top2clj">微博</a></li>
<li id=weixin-but class=weixin><a href="#" target="_blank" class="top2clj">微信</a></li>
<li class=mobile><a href="#" target="_blank" class="top2clj">移动版</a></li>
</ul>
</div>
<div class="nav1" id="nav1">
<ul class="navright">
<li class="denglu"><a href="#" target="_blank" class="top2clj">用户登陆</a></li>
<li class="zhuche"><a href="#" target="_blank" class="top2clj">注册</a></li>
<li class="bbs"><a href="#" target="_blank" class="top2clj">进入论坛</a></li>
</ul>
</div>
</div>
<div class="nav-wrapper-fixed" id="navFixed" style="display:none;">
<div class="nav" id="nav">
<ul class="sitenav-left">
<li class="aimei"><a href="#" target="_blank">爱美网</a></li>
<li class="mama"><a href="#" target="_blank" class="top2clj">爱美妈妈网</a></li>
<li class="sinaweibo"><a href="#" target="_blank" class="top2clj">微博</a></li>
<li id=weixin-but class=weixin><a href="#" target="_blank" class="top2clj">微信</a></li>
<li class=mobile><a href="#" target="_blank" class="top2clj">移动版</a></li>
</ul>
</div>
<div class="nav1" id="nav1">
<ul class="navright">
<li class="denglu"><a href="#" target="_blank" class="top2clj">用户登陆</a></li>
<li class="zhuche"><a href="#" target="_blank" class="top2clj">注册</a></li>
<li class="bbs"><a href="#" target="_blank" class="top2clj">进入论坛</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
.nav-wrapper-fixed{
/** position:fixed; 用来浮动定位(这句注释) */
top:0; /* 距离顶部0像素 */
width:1002px;/* 宽度100% */
height:20px;/* 高度30像素 */
background:#ffffff;/* 背景颜色为#000000 */
margin:0 auto;
left:auto;
}
