div4和div5是导航
滑动鼠标滚轮的时候，只有div2的内容发生变化，当滚到一定程度的时候导航就从div4切换到div5，同时div1的内容发生变化，请问这种效果要怎样做？回复内容：监听鼠标滚轮时间，计算每次滚动的距离，切换div2和div1的scrolltop即可。相关的数值高度可能需要按需计算大小后得到
http-equiv=content-type content=text/html; charset=utf-8/> 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; } id=div1 class=content> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
id=div2 class=content> 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
id=div3 class=navi>div3 class=navi_item navi_item_current>div4
class=navi_item>div5
鼠标滚动值 id=info>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