随着页面的滚动导航条跟着滚动

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指的是蓝色横条的最终宽度；

}

这个不难，主要重在理解所代表的高度，宽度，以及上面我所陈列的知识点 ，就可以