Code:
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.parent {
position:absolute;left:0px;top:200px;height:160px;width:800px;border:solid red 1px;
}
.start {
position:absolute;left:500px;top:20px;width:300px;height:60px;background-Color:#FFCC66;
}
.fix {
position:fixed;left:500px;top:0px;width:300px;height:60px;background-Color:#FFCC66;
}
/*]]>*/
</style></head>
<body>
<div class="parent" > <!-- any or no element -->
<div id="tst" class="start" ></div>
</div>
<div style="height:5000px;" ></div>
<script type="text/javascript">
/*<![CDATA[*/
function zxcFix(o){
var obj=document.getElementById(o.ID),top=0;
while(obj){
top+=obj.offsetTop;
obj=obj.offsetParent;
}
obj=document.getElementById(o.ID);
this.obj=obj;
this.scls=obj.className;
this.fcls=o.FixedClassName;
this.top=top;
this.a=document.createElement('A');
obj.parentNode.insertBefore(this.a,obj);
this.scroll();
}
zxcFix.prototype.scroll=function(){
var o=this,t=window.innerHeight?window.pageYOffset:document.documentElement.clientHeight?document.documentElement.scrollTop:document.body.scrollTop;
clearTimeout(o.dly);
if (o.obj.className==o.scls&&t>o.top){
document.body.appendChild(o.obj);
o.obj.className=o.fcls;
}
if (o.obj.className==o.fcls&&t<o.top){
o.obj.className=o.scls;
o.a.parentNode.insertBefore(o.obj,o.a);
}
o.dly=setTimeout(function(){ o.scroll(); },100);
}
new zxcFix({
ID:'tst',
FixedClassName:'fix'
})
/*]]>*/
</script>
</body>
</html>