经常会碰到需要制作某个层，使其固定于窗口某个位置的问题。网上搜索了如下几篇可供学习参考。
1.来源：http://www.cnzzad.com/jscode/jc/31.html （固定位置与浏览器四个角及中心位置，测试兼容IE6,7,8及Firefox，个人感觉缺点是移动缺少缓冲。）
Code1
<HTML>2
<HEAD>3
<TITLE>网页特效始终在页面固定位置的层</TITLE>4
<META HTTP-EQUIV="Content-Type" CONTENT="text/html" charset="gb2312">5
</HEAD>6
<style>
7
<!--8
.div{}{9
position: absolute;10
border: 2px solid red;11
background-color: #EFEFEF;12
line-height:90px;13
font-size:12px;14
z-index:1000;15
}16
-->17
</style>18
<BODY>19
<div id="Javascript.Div1" class="div" style="width: 240; height:90" align="center">正中</div>20
<SCRIPT LANGUAGE="JavaScript">21
function sc1(){22
document.getElementById("Javascript.Div1").style.top=document.body.scrollTop+(document.body.clientHeight-document.getElementById("Javascript.Div1").offsetHeight)/223
document.getElementById("Javascript.Div1").style.left=document.body.scrollLeft+(document.body.clientWidth-document.getElementById("Javascript.Div1").offsetWidth)/2;24
}25
</SCRIPT>26
27
<div id="Javascript.Div2" class="div" style="width: 240; height:90;" align="center">左上</div>28
<SCRIPT LANGUAGE="JavaScript">29
function sc2(){30
document.getElementById("Javascript.Div2").style.top=document.body.scrollTop31
document.getElementById("Javascript.Div2").style.left=document.body.scrollLeft;32
}33
</SCRIPT>34
<div id="Javascript.Div3" class="div" style="width: 240; height:90;" align="center">左下</div>35
<SCRIPT LANGUAGE="JavaScript">36
function sc3(){37
document.getElementById("Javascript.Div3").style.top=document.body.scrollTop+document.body.clientHeight-document.getElementById("Javascript.Div3").offsetHeight;38
document.getElementById("Javascript.Div3").style.left=document.body.scrollLeft;39
}40
</SCRIPT>41
<div id="Javascript.Div4" class="div" style="width: 240; height:90;" align="center">右上</div>42
<SCRIPT LANGUAGE="JavaScript">43
function sc4(){44
document.getElementById("Javascript.Div4").style.top=document.body.scrollTop;45
document.getElementById("Javascript.Div4").style.left=document.body.scrollLeft+document.body.clientWidth-document.getElementById("Javascript.Div4").offsetWidth;46
}47
</SCRIPT>48
<div id="Javascript.Div5" class="div" style="width: 240; height:90;" align="center">右下</div>49
<SCRIPT LANGUAGE="JavaScript">50
function sc5(){51
document.getElementById("Javascript.Div5").style.top=document.body.scrollTop+document.body.clientHeight-document.getElementById("Javascript.Div5").offsetHeight;52
document.getElementById("Javascript.Div5").style.left=document.body.scrollLeft+document.body.clientWidth-document.getElementById("Javascript.Div5").offsetWidth;;53
}54
</SCRIPT>55
56
<SCRIPT LANGUAGE="JavaScript">57
<!--58
function scall(){59
sc1();sc2();sc3();sc4();sc5();60
}61
window.onscroll=scall;62
window.onresize=scall;63
window.onload=scall;64
//-->65
</SCRIPT>66
<div style="position: absolute; top: 0; left: 0; width: 10000; height: 4000;"></div>67
</BODY>68
</HTML>2.来源：http://bbs.thec.cn/viewthread.php?tid=240934（固定于右下角，移动稳定，兼容IE6,7,8及Firefox。并带有点击放大层代码。）
Code1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html>3
<head>4
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />5
<style type="text/css"><!--6
body{}{margin:0px;padding:0px;font-size:12px;}7
#fictitiousPAGE{}{overflow-x:hidden;overflow-y:scroll;width:100%;text-align:center;margin:0px;}8
#content{}{margin:0 auto;height:1024px;width:50%;background:#F7F7F7;}9
#content p{}{text-align:left;line-height:18px;text-indent:2em;}10
#talk{}{position:absolute;z-index:99;bottom:5px;right:20px;height:200px;width:200px;background:#369;color:#FFF;}11
--></style>12
</head>13
<body>14
<div id="fictitiousPAGE">15
<div id="content">16
<h2>fictitiousPAGE（虚拟页面）下的一个DIV！</h2>17
<h3>本层高1024px,底色为#F7F7F7</h3>18
<p>如果你的网页没有采用标准化，即HTML源码每一行不是<code style="COLOR: #f00"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></code>,请将JS代码中的第一句改为<code style="COLOR: #00f">document.body.style.overflow="hidden";</code><br />19
另；为了JS代码简洁易读，我没有写层的变小FUNCTION，只是简单加了一个点击变大，可根据自己需要来修改。</p>20
<p>CopyRight© Victor-香草根,by 2007-4-13。<br />21
EDIT:EditPlus</p>22
<h3>近来要做个应用</h3>23
<p>准备开始新的人生，可是现在自己还没有一个像样的作品，抽空要做点什么了，初步定为做一个WEB应用（JS，主要在于界面交互—也就是GOOGLE说的用户体验），先这么定着，近着又很忙，为了烦乱的心情更涂了一层灰蒙蒙的东西，唉！不想那么多了。</p>24
</div>25
</div>26
<div id="talk">郁闷的人，郁闷的心。有空大家可以去我的BLOG上转转<a href="http://blog.zhongmoo.cn">http://blog.zhongmoo.cn</a></div>27
<script language="javascript" type="text/javascript">28
document.documentElement.style.overflow="hidden"; //将body的滚动条隐藏29
document.getElementById("fictitiousPAGE").style.height=document.documentElement.clientHeight + "px"; //将虚拟BODY的高调整为BODY高30
document.getElementById("talk").onclick=function(){31
this.style.height="300px";32
this.style.width="600px";33
};34
</script>35
</body>36
</html>另外几个可参考代码：
3. http://hi.baidu.com/along_space/blog/item/608ff8f2c08a3c58352acccc.html （有部分思路及分析，不错！代码如底部。）
4. http://www.ziyoufly.cn/article.asp?id=94
5. http://hi.baidu.com/b0zz/blog/item/e40cb27e6608293f0cd7dacb.html （这个略微有别于本篇范畴，但也是不错的效果，拿来参考。）
链接3代码如下：
Code1
<head>2
3
4
js<script type="text/javascript">5
function scrollImg(){6
var posX,posY;7
if (window.innerHeight) {8
posX = window.pageXOffset;9
posY = window.pageYOffset;10
}11
else if (document.documentElement && document.documentElement.scrollTop) {12
posX = document.documentElement.scrollLeft;13
posY = document.documentElement.scrollTop;14
}15
else if (document.body) {16
posX = document.body.scrollLeft;17
posY = document.body.scrollTop;18
}19
var ad=document.getElementById("add");20
ad.style.top=(posY+173)+"px";21
ad.style.left=(posX+800)+"px";22
setTimeout("scrollImg()",100);23
}24
</script>25
26
</HEAD>27
<BODY>28
<div id="add" style="position:absolute;width:252px;height:550px;text-align:left">滚动的内容</div>29
<script type="text/javascript">30
scrollImg();31
</script>32
33
</body>34
35
36
37
38
解决思路：39
要使层能随滚动条的滚动而滚动，首先必须捕获到滚动条的滚动事件，或者设置一个计时器，不断检索滚动条的滚动位置，然后设置层的坐标值。40
具体步骤：41
方法一：用onscroll事件触发函数，设置层的坐标。42
43
<div id="oLayer" style="position:absolute;left:30;top:60;z-index:2;background:green;width:120px;height:70px">44
</div>45
<script>46
document.write(new Array(100).join("<br>"))47
var init_pos=oLayer.style.posTop48
document.body.onscroll=function(){49
oLayer.style.posTop=document.body.scrollTop+init_pos50
}51
</script>52
53
核心代码解释：54
(1) 55
document.write(new Array(100).join("<br>"))56
57
这个是为了观看效果，插入99个<br>换行的代码，在实际应用时可以删掉。58
59
(2) 60
var init_pos=oLayer.style.posTop61
62
初始化变量init_pos为层oLayer的Y坐标值，posTop和pixelTop取到的值是纯数字，而top取到的是带"px"单位的字符串。可以运行下面的代码来了解一下三个属性的值的数据类型。63
64
<div id="oLayer" style="position:absolute;left:30;top:60;">65
<button onclick=’with(oLayer.style)alert("posTop:"+posTop+"\tType:"+typeof(posTop)+" \n\npixelTop:"+pixelTop+"\tType:"+typeof(pixelTop)+"\n\ntop:"+top+"\t \tType:"+typeof(top))’>点击我看结果</button>66
</div>67
68
(3)69
70
document.body.onscroll=function(){71
oLayer.style.posTop=document.body.scrollTop+fixpos72
}73
74
这个是在文档区域拖动滚动条时执行的函数，第二行是重新设置层oLayer的Y坐标，document.body.scrollTop等于滚动滑块上端离滚动的开始点的距离，如果理解不了可以在运行一下下面的代码后单击按钮测试。75
76
<body onload="init_pos=oLayer.style.posTop" onscroll="oLayer.style.posTop=document.body.scrollTop+init_pos">77
<div id="oLayer" style="position:absolute;left:30;top:60;">78
<button onclick=alert(document.body.scrollTop)>点击查看document.body.scrollTop的值</button>79
</div>80
<script>81
document.write(new Array(100).join("<br>"))82
</script>83
84
(4)85
86
oLayer.style.posTop=document.body.scrollTop+fixpos87
88
整句的意思就是设置层oLayer的Y坐标为文档区域的滚动条已滚动量加上层的原Y轴坐标值之和。89
90
方法二：不知道读者有没有注意到，层oLayer的移动很突然，没有平滑移动的过程，立刻就跳到目标位置。再看看下面的代码运行效果：91
92
<div id="oLayer" style="position:absolute;left:30;top:60;z-index:2;background:green;width:120px;height:70px">93
</div>94
<script>95
document.write(new Array(100).join("<br>"))96
//初始化变量init_pos为层oLayer的Y坐标值97
var init_pos=oLayer.style.posTop98
//文档区域滚动时执行scrollit()函数99
document.body.onscroll=function scrollit(){ 100
//层要移动到的目标坐标101
var target_pos=document.body.scrollTop+init_pos102
var step=5 //变量step为步长，层每次移动的距离量103
//如果是往上拉滚动条，步长应为负值104
if(oLayer.style.posTop>target_pos) step*=-1105
oLayer.style.posTop+=step //层的Y坐标值增加106
//判断层的当前Y坐标值跟目标距离间的值是否大于一个定值，是的话在50毫秒后继//续执行一次scrollit()函数，否则层停止在当前位置107
if(Math.abs(oLayer.style.posTop-target_pos)>Math.abs(step)) setTimeout("scrollit()",50)108
}109
</script>110
111
方法三：相对之下，层的第二种移动方式比第一种来得平滑一点，但仍然不够自然，下面再看看第三种效果。112
113
<div id="oLayer" style="position:absolute;left:30;top:60;z-index:2;background:green;width:120px;height:70px">114
</div>115
<SCRIPT>116
//输出99个<br>117
document.write(new Array(100).join("<br>"))118
//变量init_pos为层的最初Y坐标值，last_pos为层最后一层移动后的Y坐标值，在下面的函数执行之前它们是相等的119
var init_pos=last_pos=oLayer.style.posTop120
/**//*setInterval(表达式或函数,时间)的作用是每隔一段时间(单位：毫秒)之后执行一次表达式或函数，这里是每1毫秒(千分一秒)执行一次函数*/121
setInterval(function(){122
//目标坐标，上两段代码里解释过具体意思了123
var target_pos=document.body.scrollTop+init_pos124
/**//*步长，目标位置减上一次移动后的位置的十分一(10是经验数字，换成其它值的话效果会产很远)，因为last_pos是不断接近target_pos 的，所以step的绝对值也越来越小，这就是产生弹性移动的原因。最后"|0"的意思是把前面的计算结果跟0进行二进制的按位“或”运算，作用等同于 Math.floor()，只是效率更高*/125
var step=(target_pos-last_pos)/10|0126
//以step为步长移动层127
oLayer.style.posTop+=step128
//更新变量last_pos的值，没有这步也不可能产生弹性移动效果129
last_pos+=step130
//这里的1是1毫秒131
},1)132
</script>133
浙公网安备 33010602011771号