1、了解offsetTop,offsetHeight方面的知识点；
1） clientHeight,scrollHeight,offsetHeight
a) clientHeight：可理解为内部可视区高度，样式的height + 上下padding
b) scrollHeight：内容的实际高度 + 上下 padding(如果没有限制div的height,即height是自适应的，一般是scrollHeight == clientHeight)
c) offsetHeight： 可理解为div的可视高度，样式的height +上下padding + 上下border-width;
2) clientTop,scrollTop,offsetTop
a) clientTop: 容器内部相对于容器本身的top偏移，实际上就是border-width;
b) scrollTop : Y轴的滚动条没有，或滚到最上时，是0；y轴的滚动条滚到最下时是scrollHeight-clientHeight
c) offsetTop：容器到其包含块顶部的距离，粗略的说可以理解为其父元素。
2、scrollTop.scrollHeight,onscroll
a) onscroll 当元素的滚动条滚动时触发的事件；
b) scrollTop 元素滚动条内的顶部隐藏部分的高度；（只有DOM元素才有，window/document没有）。
获取整个文档scrollTop,IE是document.documentElement.scrollTop,FF/CH是document.body.scrollTop;
c) scrollHeight 元素滚动条内的内容高度；与scrollTop元素一样，只在DOM里使用；它只读，不可设置。
IE/FF/CH都可以通过document.documentElement.scrollHeight或document.body.scrollHeight;
代码附上：
html部分：
<ul id="smalldaohang"> <a href="#introduce1" class="one"><li>Introduce</li></a> <a href="#protfolio1"><li>Protfolio</li></a> <a href="#contact1"><li>contact</li></a> </ul> <div id="blue"></div> <div id="content"> <div></div> <div></div> <div></div> </div>
css部分：（我这里只放了主要css样式）
.one { border-bottom: 5px solid white; } .cur { border-bottom: 0; } #blue { z-index: 1; height: 3px; background-color: #64b5f6; border-radius: 15px; position: fixed; top: 50px; box-shadow:2px 1px 3px black; }
js部分：
//白色底部边框区域的变化 var smalldaohang = document.getElementById("smalldaohang"); var content = document.getElementById("content"); var smalldaohangChild = smalldaohang.children; var contentChild = content.children; var a = daohang.offsetHeight; var d = content.offsetTop - a; window.onscroll = function() { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; for(var i=0;i<smalldaohangChild.length;i++) { if(scrollTop - d >=contentChild[i].offsetTop){ //这里根据自己的需要可以自己调节； for(var j=0;j<smalldaohangChild.length;j++) { smalldaohangChild[j].className="cur"; } smalldaohangChild[i].className="one"; } } //蓝色横条的变化 var height2 = 1129; //页面的总高度-最后滚动条所在页面的高度； var blue = document.getElementById("blue"); blue.style.width = parseFloat(scrollTop / height2) * 1519.2 +"px"; //1519.2指的是蓝色横条的最终宽度； }
这个不难，主要重在理解所代表的高度，宽度，以及上面我所陈列的知识点 ，就可以
