window.οnlοad=function(){
nav();
};
//nav导航
function nav(){
var arr = [pos($('div1')).top,pos($('div2')).top,pos($('div3')).top,pos($('div4')).top,pos($('div5')).top,pos($('div6')).top,pos($('div7')).top,pos($('div8')).top];
var oUl=getByClass('nav')[0];
var aLi = oUl.getElementsByTagName('li');
console.log(aLi.length);
(function(){
aLi[0].style.background ='#fd8200';
aLi[0].s=true;
})();
for(var i=0; i
aLi[i].onmouseover = function(){
if(!this.s){
this.style.background='#fd8200'
}
}
aLi[i].onmouseout = function(){
if(!this.s){
this.style.background='';
}
}
aLi[i].index=i;
aLi[i].οnclick=function(){
num = this.index;
for(var i=0; i
aLi[i].style.background='';
aLi[i].s='';
}
this.style.background='#fd8200';
this.s=true;
window.οnscrοll=function(){
}
}
}
document.onmousewheel=fnMouse;//滚轮事件
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',fnMouse,false);
}
function fnMouse(){
for(var i=0;i
aLi[i].style.background='';
console.log("y "+scrollY());
console.log("arr "+arr[i]);
if(scrollY()>arr[i] && scrollY()
aLi[i].style.background='#fd8200';
};
if(scrollY()>arr[arr.length-1]){
aLi[arr.length-1].style.background='#fd8200';
};
}
}
}
// 滚动条高
function scrollY() {
return document.documentElement.scrollTop || document.body.scrollTop;
};
//获取className
function getByClass(sClass,parent){
var aEles=(parent || document).getElementsByTagName('*');
var re = new RegExp('\b'+ sClass +'\b');
var arr=[];
for(var i=0;i
if(re.test(aEles[i].className)){
arr.push(aEles[i])
}
}
return arr;
}
//获取ID
function $(id){
return document.getElementById(id);
}
//obj到页面顶部实际距离
function pos(obj){
var result = {left:0,top:0};
while(obj){
result.top +=obj.offsetTop;
result.left +=obj.offsetLeft;
obj=obj.offsetParent;
}
return result;
}
演示
