05/6
2015
今天逛b站感觉它右侧悬浮的导航条挺有意思，于是复制了它的结构，写了一下功能。
查看demo
可以根据左侧区域的显示高亮导航上的项目；点击导航按钮可以调到对应的分类区域。但不能拖动导航来改变左侧区域的顺序。
背景div的平滑移动效果是因为设置了“transition:.1s all linear;”属性。左侧的分类div需要设置高度；修改时把右侧导航的条目调整到和左侧分类相符就行了。
js部分需要在左侧分类div的样式之后执行，否则不能正确获取分类div的高度。js代码如下：
;//获取导航上的指示器，即蓝色背景
var eAll=document.getElementsByClassName("leftbox");//左侧各个分类div
var eTop=new Array();// 储存各个分类div距离页面顶部的坐标
for (var i = 0; i < eAll.length; i++) {
eTop[i]=getTop(eAll[i]);
};
var rightNav=document.getElementsByClassName("name");//获取右侧导航按钮
for (var i = 0; i < rightNav.length; i++) {
rightNav[i].index=i; //添加索引
rightNav[i].addEventListener('click', function(){document.body.scrollTop=eTop[this.index];document.documentElement.scrollTop=eTop[this.index];}, true); //添加跳转
};
window.onscroll=function(){
var eyeTop=document.documentElement.scrollTop|| document.body.scrollTop ;//获取卷去的高
if (eTop[0]-window.screen.availHeight>=eyeTop||eTop[eTop.length-1]+eAll[eAll.length-1].offsetHeight<=eyeTop) {
//如果分类div未在可视区域内。分两种情况，一种是页面还未滚动到分类div，一种是分类div已经滚动过去了而不可见
biaoji.style.display="none";
return false;
};
for (var i = 0; i < eAll.length; i++) {
if(eTop[i]>=eyeTop){ //如果某个div距离页面顶部的距离大于卷去的高度
biaoji.style.top=(document.getElementsByClassName("pointer-block")[0].offsetHeight+1)*i+"px";
biaoji.style.display="block";
break;
};
};
}
}
获取div高度使用了offsetHeight属性。查看参考网页
设置页面的滚动位置时使用了下面的写法：
document.documentElement.scrollTop|| document.body.scrollTop
在我使用的过程中，第一种方法在ie和firefox中生效，chrome中无效。第二种方法则只在chrome中有效。查看参考网页
