效果预览：
代码：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 *{margin:0;padding:0;} 8 .box{margin-left:50px;} 9 li{ list-style:none;} 10 .box ul li{width:800px;height:344px;border-left:1px dotted #666666;position:relative;} 11 .box2{height:500px;} 12 .box3{height:2000px;} 13 .box ul li a{line-height:32px; text-align:center;color:#fff;background:url(http://img.baidu.com/img/iknow/exp/global/step_ico_bg.png) no-repeat left top;width:32px;height:32px;display:block;position:absolute;left:-16px;top:0;} 14 .icon_link{position:fixed;top:0;left:34px;} 15 .icon_link a{line-height:32px; text-align:center;color:#fff;background:url(http://img.baidu.com/img/iknow/exp/global/step_ico_bg.png) no-repeat left -68px;width:32px;height:32px;display:block;display:none;} 16 17 .icon_link a.current{background-position:0 0;} 18 </style> 19 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 20 <script src="mousewheel.js"></script> 21 <script> 22 $(function(){ 23 var $window = $(window); 24 var iconList = $(‘.icon_link a‘); 25 var aList = $(‘ul a‘); 26 aList.each(function(index,em){ 27 $(this).attr(‘top‘,index*32); 28 }); 29 $window.scroll(function(){ 30 var scrollTop = $window.scrollTop(); 31 if(($(‘ul a:last‘).offset().top+ $(‘ul li:last‘).outerHeight()) - scrollTop-150 <= 0){ 32 aList.css(‘visibility‘,‘visible‘); 33 iconList.css(‘display‘,‘none‘); 34 return; 35 } 36 aList.each(function(index,em){ 37 if(aList.eq(index).offset().top - scrollTop <= aList.eq(index).attr(‘top‘)){ 38 aList.eq(index).css(‘visibility‘,‘hidden‘); 39 iconList.removeClass(‘current‘); 40 iconList.eq(index).addClass(‘current‘).css(‘display‘,‘block‘); 41 }else{ 42 aList.eq(index).css(‘visibility‘,‘visible‘); 43 iconList.eq(index).removeClass(‘current‘).css(‘display‘,‘none‘); 44 } 45 }); 46 47 }); 48 iconList.click(function(){ 49 var i = $(this).index(); 50 var t = $(‘ul li‘).eq(i).offset().top; 51 $(‘body,html‘).stop().animate({scrollTop:t}); 52 }); 53 }) 54 </script> 55 </head> 56 57 <body> 58 <div class="box"> 59 <div class="box2"></div> 60 <ul> 61 <li id="icon1"><a>1</a><img src="http://hiphotos.baidu.com/exp/w=500/sign=ab84830bc9ea15ce41eee00986013a25/203fb80e7bec54e79e6ef790b9389b504ec26aba.jpg"></li> 62 <li id="icon2"><a>2</a><img src="http://hiphotos.baidu.com/exp/w=500/sign=8ca475112edda3cc0be4b82031e83905/5fdf8db1cb134954ceb104ea564e9258d0094a95.jpg"></li> 63 <li id="icon3"><a>3</a><img src="http://hiphotos.baidu.com/exp/w=500/sign=33fa75d0ddc451daf6f60ceb86fc52a5/b64543a98226cffc3638523cb9014a90f603ea2a.jpg"></li> 64 </ul> 65 <div>end</div> 66 <div class="icon_link"> 67 <a href="javascriptl:;" class="icon1">1</a> 68 <a href="javascriptl:;" class="icon2">2</a> 69 <a href="javascriptl:;" class="icon3">3</a> 70 </div> 71 <div class="box3"></div> 72 </div> 73 </body> 74 </html>
原文：http://www.cnblogs.com/loverows/p/3894948.html