我们在查看百度百科时，经常能发现右边有一个导航跟着滚动，这是一个非常不错的创意，方便用户查看浏览。
在网上找到了一个用JavaScript写的代码，不过鄙人觉得不是很好，就用jQuery写了一个。毕竟jQuery写的代码比较少，也比较容易理解。
html的代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery 菜单</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery-2.1.4.min.js"></script> <script type="text/javascript" src="kuozhan.js"></script> <style type="text/css"> a{ text-decoration: none; color: gray; } #gailan{ width: 40%; height:auto; float: left; position: fixed; top: 100px; left:10px; } #xiangxi{ width: 60%; height: auto; float: right; margin-top: 80px; } </style> </head> <body> <div id="gailan"> <ul> <li><a href="#1">1、第一</a></li> <li><a href="#2">2、第二</a></li> <li><a href="#3">3、第三</a></li> <li><a href="#4">4、第四</a></li> <li><a href="#5">5、第五</a></li> <li><a href="#6">6、第六</a></li> <li><a href="#7">7、第七</a></li> <li><a href="#8">8、第八</a></li> <li><a href="#9">9、第九</a></li> <li><a href="#10">10、第十</a></li> <li><a href="#11">11、第十一</a></li> </ul> </div> <div id="xiangxi"> <ul> <li id="1">1、第一<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></li> <li id="2">2、第二<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></li> <li id="3">3、第三<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></li> <li id="4">4、第四<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></li> <li id="5">5、第五<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></li> <li id="6">6、第六<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></li> <li id="7">7、第七<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></li> <li id="8">8、第八<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></li> <li id="9">9、第九<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></li> <li id="10">10、第十<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></li> <li id="11">11、第十一<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></li> </ul> </div> </body> </html>
js的代码
$(document).ready(function(){ var xio = $("#xiangxi ul li");//ID xiangxi 的li标签 var glo = $("#gailan ul li a");//ID gailan 的a标签 var yiheight = xio.eq(0).offset().top;//第一个详细的高度 var lastheight = xio.eq(-1).offset().top;//返回最后一个li的高度 var lasttwoheight = xio.eq(-2).offset().top;//返回倒数第二个li的高度 var lzheight = (lastheight - lasttwoheight)*2/3;//两者之间高度的2/3 window.onscroll=function(){ //滚轮滚动事件，JavaScript的写法 xio.each(function(i,n){ //each函数的遍历，jquery的用法 var scrollheight = $(window).scrollTop();//滚动条滚动的高度,这个必须放在滚动函数里 if( xio.eq(i).offset().top < scrollheight+yiheight && xio.eq(i+1).offset().top > scrollheight+yiheight /*与的比较，符合两个情况才为真*/ ){ glo.eq(i).css({"color":"#f00","font-size":"18px"});//突出的css }else{ glo.eq(i).css({"color":"#00AA00","font-size":"16px"});//原来的css } if (scrollheight > lasttwoheight+lzheight){ //为最后一个，做的判断补偿 glo.eq(-1).css({"color":"#f00","font-size":"18px"}); } }); } });
建议将这两段代码复制到自己文件上查看，才比较容易看出所以然来，里面的注释已经写的很清楚了。相信很容易就能看明白了。