window.onload=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.length;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].onclick=function(){
num = this.index;
for(var i=0; i<aLi.length;i++){
aLi[i].style.background='';
aLi[i].s='';
}
this.style.background='#fd8200';
this.s=true;
window.onscroll=function(){
}
}
}
document.onmousewheel=fnMouse;//滚轮事件
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',fnMouse,false);
}
function fnMouse(){
for(var i=0;i<arr.length;i++){
aLi[i].style.background='';
console.log("y "+scrollY());
console.log("arr "+arr[i]);
if(scrollY()>arr[i] && scrollY()<arr[i+1]){
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<aEles.length;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;
}
javascript练习：导航随内容滚动而跟随变化
关注我
我的微信公众号：前端开发博客，在后台回复以下关键字可以获取资源。
- 回复「小抄」，领取Vue、JavaScript 和 WebComponent 小抄 PDF
- 回复「Vue脑图」获取 Vue 相关脑图
- 回复「思维图」获取 JavaScript 相关思维图
- 回复「简历」获取简历制作建议
- 回复「简历模板」获取精选的简历模板
- 回复「加群」进入500人前端精英群
- 回复「电子书」下载我整理的大量前端资源，含面试、Vue实战项目、CSS和JavaScript电子书等。
- 回复「知识点」下载高清JavaScript知识点图谱
每日分享有用的前端开发知识，加我微信:caibaojian89 交流