<!-- Internet Explorer has to be in quirks mode, this comment just does that -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>'position:fixed' in Internet Explorer</title>
<style type="text/css">
#fixed {
position:fixed;
_position:absolute;
top:20px;
_top:expression(eval(document.body.scrollTop)+20);
left:0;
margin:0;
padding:0;
background:lime;
}
/* if you want to emulate bottom:0;, use this:
h1{
position:fixed;
_position:absolute;
bottom:0;
_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);
background:red;
*/
</style>
<script type="text/javascript">
<!--
function Year(){
ary=['','2009','2008','2007','2006','2005'];
var top=zxcWWHS()[3];
var f=document.getElementById('fixed');
var as=zxcByClassName('anchor')
for (var z0=0;z0<as.length;z0++){
if (top<zxcPos(as[z0])[1]){
f.innerHTML=ary[z0];
break
}
}
}
function zxcPos(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
}
function zxcWWHS(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
}
function zxcByClassName(nme,el,tag){
if (typeof(el)=='string') el=document.getElementById(el);
el=el||document;
for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
}
//-->
</script>
<body>
<div id="fixed" >Fix</div>
<a class="anchor" >2009</a>
<div style="height:300px;" ></div>
<a class="anchor" >2008</a>
<div style="height:500px;" ></div>
<a class="anchor" >2007</a>
<div style="height:500px;" ></div>
<a class="anchor" >2006</a>
<div style="height:500px;" ></div>
<a class="anchor" >2005</a>
<div style="height:500px;" ></div>
<a class="anchor" >end</a>
</body>
<script type="text/javascript">
<!--
setInterval('Year()',100)
//-->
</script></html>