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指的是蓝色横条的最终宽度；
}
终于做出来啦 开森~ 哈哈哈 （其实呢，这个不难，主要重在理解所代表的高度，宽度，以及上面我所陈列的知识点 ，就可以啦~）
