实现京东商城楼梯式导航定位菜单：滚动定位菜单项和点击定位菜单项！

 

 

涉及知识点：find()、parent()、offset(）、scroll()等jQ函数，请自觉复习各种函数！

html代码：

 

1 
      2     
     
       3         
      
        4             
       
1F服饰
 5             
       
2F美妆
 6             
       
3F手机
 7             
       
4F家电
 8             
       
5F数码
 9             
       
6F运动
10             
       
7F居家
11             
       
8F母婴
12             
       
9F食品
13             
       
10F图书
14             
       
11F服务
15         
      
16     
     
17     
     18     
     19     
     
      20         
      21         
      
       
      
22         
      
       
      
23         
      
       
      
24         
      
       
      
25         
      
       
      
26         
      
       
      
27         
      
       
      
28         
      
       
      
29         
      
       
      
30         
      
       
      
31         
      
       
      
32     
     
33     
     34     
     35     
     

css代码：

1 #menu{ 2         width:32px;height:360px; 3         position:fixed; 4         top:200px;left:0px; 5         display: none; 6     } 7     #menu ul li{ 8         width:32px;height:32px; 9         list-style-type:none;10         color:#8F8583;11         text-align:center;12         line-height: 32px;13         border-bottom:1px dotted #ddd;14         position:relative;15     }16     #menu ul li span{17         display:block;width:32px;height:32px;18         background:#C81623;19         position:absolute;20         top:0;left:0;21         color:#fff;font-size:12px;22         display: none;23     }24     #menu ul li:hover span{display:block; }25     #menu ul li span.active{color:#C81623;background:#fff;display:block;}26     #content{27         width:1220px;28         margin:0 auto;29     }  30     #footer{width:1220px;height:600px;background:#FE7678;}31     .container{margin:0 auto;}

代码：

1 $(function(){ 2         var _index=0; 3         $("#menu ul li").click(function(){ 4             $(this).find("span").addClass("active").parent().siblings().find("span").removeClass("active"); 5             _index=$(this).index()+1; 6             //通过拼接字符串获取元素，再取得相对于文档的高度 7             var _top=$("#louti"+_index).offset().top; 8             //scrollTop滚动到对应高度 9             $("body,html").animate({scrollTop:_top},500);10         });11         var nav=$("#menu"); //得到导航对象12         var win=$(window); //得到窗口对象13         var sc=$(document);//得到document文档对象。14         win.scroll(function(){15 16           if(sc.scrollTop()>=600){17            $("#menu").show(); 18            //获取滚动元素对应的索引!!!重难点19             var index=Math.floor(sc.scrollTop()/600);20 21             $("#menu ul li span").eq(index-1).addClass("active").parent().siblings().find("span").removeClass("active");22           }else{23            $("#menu").hide();24           }25         });26     });

滚动中常用到的jQ写法： $("body,html").animate({scrollTop:_top},500);

总结：相对来说，这是个蛮有趣的实践案例，但其中用到比较多的函数，结合了本案例比较特殊的html结构设计，需要理清滚动导航时候的条件判断。

 

 

文章来源：http://blog.csdn.net/macanfa/article/details/51449629