实现效果：
1.滚动鼠标滑轮，到达上方导航条时，上方导航条固定在最上面，如果不超过不固定
2.快到最左端导航条时，左端导航条固定在左边
3.在这些之外范围，左端导航条和上方导航条恢复原样。
实现过程：
1.获得最上方header的高度，（header之下是导航条nav）
2.当鼠标滚动超过这个高度时,让导航条的位置固定在最上方
3.继续滑动鼠标，当窗口上方到达做导航条上方一定距离时（这里是120px）
让左导航条固定。（这里是top:120px; left:100px）
4.当没有在这些范围内，所有导航条恢复原位置。
实现细节：
1. position: fixed
2. pageXOffset 和 pageYOffset 属性返回文档在窗口左上角水平和
垂直方向滚动的像素。
3. var scrollTop = document.body.scrollTop
Microsoft edge中可以360浏览器中也可以，
4.var scrollTop = document.documentElement.scrollTop
中可以，IE浏览器中也行，Microsoft edge不可以。
5.所有主流浏览器都支持 pageXOffset 和 pageYOffset 属性。注意：
IE 8 及 更早 IE 版本不支持该属性,但可以使用document.documentElement.scrollLeft和document.documentElement.scrollTop属性 。
6.兼容写法：var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
7.vertical-align: top
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随鼠标滚动的导航条</title>
<style>
*{
padding: 0;
margin: 0;
}
.main{
width:1385px;
margin: 0 auto;
}
div img{
vertical-align: top;
}
.fix{
position: fixed;
top: 0;
}
.leftNav{
position: absolute;
top: 1100px;
left: 100px;
}
.leftNavFix{
position: fixed; /*固定位置会脱离标准文档流*/
top: 120px;
left: 100px;
}
</style>
<script>
window.onload = function(){
var head = document.getElementsByClassName('header')[0];
var nav = document.getElementById('nav');
var leftNav = document.getElementById('leftNav');
var leftTop = leftNav.offsetTop;
window.onscroll = function(){
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
if(scrollTop >= head.offsetHeight){
nav.className = 'fix';
}else{
nav.className = 'nav';
}
if(scrollTop >= leftTop-120){
leftNav.className = 'leftNavFix';
}else{
leftNav.className = 'leftNav';
}
}
}
</script>
</head>
<body>
<div class="main">
<div class="header">
<img src="imgs/header.jpg" alt="">
</div>
<div class="nav" id="nav">
<img src="imgs/nav.jpg" alt="">
</div>
<div class="bd">
<img src="imgs/bd.jpg" alt="">
<img src="imgs/leftNav.jpg" alt="" class="leftNav" id="leftNav">
</div>
</div>
</body>
</html>
