請問這個網頁效果怎樣做？

div4和div5是導航

滑動滑鼠滾輪的時候，只有div2的內容發生變化，當滾到一定程度的時候導航就從div4切換到div5，同時div1的內容發生變化，請問這種效果要怎樣做？

&
&
&
&
&Scroll&
& div{
padding: 0;
margin:0;
border: 1px solid #000000;
}
#div1{
color: green;
}
#div2{
color: yellow;
}
.content, .navi{
float: left;
height: 100px;
width: 100px;
overflow: hidden;
}
.navi_item{
margin: 5px;
}
.navi_item_current{
background: red;
}
& &
&

&
1 &2 &3 &4 &5 &6 &7 &
8 &9 &10 &11 &12 &13 &14 &
15
& &
1 &2 &3 &4 &5 &6 &7 &
8 &9 &10 &11 &12 &13 &14 &
15
& &div3
&div4& &div5& & &滑鼠滾動值&0&& &
//當超過某個伐值時切換導航
var threshold = 200;
//滑鼠滾輪滾動時每次滾動的距離(px)
var range = 10;
//記錄滑鼠滾輪總共的
var currentOffset = 0;
var scrollFunc = function(e){
var offset = 0;
e = e || window.event;
if(e.wheelDelta){//IE/Opera/Chrome
offset = e.wheelDelta;
}else if(e.detail){//Firefox
//firefox 滑鼠滾動返回+(-)3，正負方向也相反, 為了統一乘以-40，
offset = -e.detail * 40;
}
document.getElementById("info").innerHTML = offset;
navi(offset);
}
function navi(scrollOffset){
//1表示向下，-1表示向上
var direct = 1;
var div2 = document.getElementById("div2");
var div1 = document.getElementById("div1");
var navi = document.getElementById("div3").getElementsByTagName("div");
//滑鼠滾輪向下為負數
direct = scrollOffset &> 0 ? -1 : 1;
currentOffset = currentOffset + direct * range;
currentOffset = currentOffset &< 0 ? 0 : currentOffset; console.log(currentOffset); if(currentOffset &> threshold){
div1.scrollTop = currentOffset - threshold;
navi[1].className = "navi_item navi_item_current";
navi[0].className = "navi_item";
}else{
div2.scrollTop = currentOffset;
navi[0].className = "navi_item navi_item_current";
navi[1].className = "navi_item";
}
}
/*註冊事件*/
if(document.addEventListener){
document.addEventListener("DOMMouseScroll",scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari
&
&
&