var oFn1=document.getElementById("fn1");
var oFn2=document.getElementById("fn2");
var oFn3=document.getElementById("fn3");
var oFn4=document.getElementById("fn4");
var oDiv=document.getElementById("div1");
var aLi=oDiv.getElementsByTagName("li");
var arr=[];
arr.push({top:oFn1.offsetTop,left:oFn1.offsetLeft});
arr.push({top:oFn2.offsetTop,left:oFn2.offsetLeft});
arr.push({top:oFn3.offsetTop,left:oFn3.offsetLeft});
arr.push({top:oFn4.offsetTop,left:oFn4.offsetLeft});
arr.push({top:oDiv.offsetTop,left:oDiv.offsetLeft});
window.onscroll=function(){
var iScrollHeight=document.documentElement.scrollTop||document.body.scrollTop;
scrollFixed(iScrollHeight);
show(iScrollHeight);
function scrollFixed(num){
if(num>arr[4].top){
oDiv.style.position="fixed";
oDiv.style.top="0";
oDiv.style.zIndex=999;
}else{
oDiv.style.position="absolute";
oDiv.style.top=arr[4].top+"px";
}
}
function show(num){
var arrtemp=[];
for(var i=0;i<aLi.length;i++){
if(num>arr[i].top){
arrtemp.push(i)
}
}
var iMax=arrtemp[arrtemp.length-1];
for(var i=0;i<aLi.length;i++){
for(var j=0;j<aLi.length;j++){
aLi[i].className="";
}
aLi[iMax].className="active";
}
}
var oCen = document.getElementById('center');
var aDiv = oCen.getElementsByTagName('div');
var oNav = document.getElementById('nav');
var aLi = oNav.getElementsByTagName('li');
var oFn1=document.getElementById("fn1");
var oFn2=document.getElementById("fn2");
var oFn3=document.getElementById("fn3");
var oFn4=document.getElementById("fn4");
var oDiv=document.getElementById("div1");
var aLi=oDiv.getElementsByTagName("li");
var arr=[];
arr.push({top:oFn1.offsetTop,left:oFn1.offsetLeft});
arr.push({top:oFn2.offsetTop,left:oFn2.offsetLeft});
arr.push({top:oFn3.offsetTop,left:oFn3.offsetLeft});
arr.push({top:oFn4.offsetTop,left:oFn4.offsetLeft});
arr.push({top:oDiv.offsetTop,left:oDiv.offsetLeft});
window.onscroll=function(){
var iScrollHeight=document.documentElement.scrollTop||document.body.scrollTop;
scrollFixed(iScrollHeight);
show(iScrollHeight);
function scrollFixed(num){
if(num>arr[4].top){
oDiv.style.position="fixed";
oDiv.style.top="0";
oDiv.style.zIndex=999;
}else{
oDiv.style.position="absolute";
oDiv.style.top=arr[4].top+"px";
}
}
function show(num){
var arrtemp=[];
for(var i=0;i<aLi.length;i++){
if(num>arr[i].top){
arrtemp.push(i)
}
}
var iMax=arrtemp[arrtemp.length-1];
for(var i=0;i<aLi.length;i++){
for(var j=0;j<aLi.length;j++){
aLi[i].className="";
}
aLi[iMax].className="active";
}
}