-仿京东商城楼梯式导航定位菜单

Posted 2020-09-15 kbeer

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

 

 

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

html代码：

 

 1 <!-- 导航菜单 -->
 2     <div id="menu">
 3         <ul>
 4             <li>1F<span>服饰</span></li>
 5             <li>2F<span>美妆</span></li>
 6             <li>3F<span>手机</span></li>
 7             <li>4F<span>家电</span></li>
 8             <li>5F<span>数码</span></li>
 9             <li>6F<span>运动</span></li>
10             <li>7F<span>居家</span></li>
11             <li>8F<span>母婴</span></li>
12             <li>9F<span>食品</span></li>
13             <li>10F<span>图书</span></li>
14             <li>11F<span>服务</span></li>
15         </ul>
16     </div>
17     <!-- 导航菜单 -->
18     <!-- 产品内容 -->
19     <div id="content">
20         <img src="images/head.png" alt="" style="border:1px solid red;">
21         <div class="louti" id="louti1"><img src="images/f1.png" alt=""></div>
22         <div class="louti" id="louti2"><img src="images/f2.png" alt=""></div>
23         <div class="louti" id="louti3"><img src="images/f3.png" alt=""></div>
24         <div class="louti" id="louti4"><img src="images/f4.png" alt=""></div>
25         <div class="louti" id="louti5"><img src="images/f5.png" alt=""></div>
26         <div class="louti" id="louti6"><img src="images/f6.png" alt=""></div>
27         <div class="louti" id="louti7"><img src="images/f7.png" alt=""></div>
28         <div class="louti" id="louti8"><img src="images/f8.png" alt=""></div>
29         <div class="louti" id="louti9"><img src="images/f9.png" alt=""></div>
30         <div class="louti" id="louti10"><img src="images/f10.png" alt=""></div>
31         <div class="louti" id="louti11"><img src="images/f11.png" alt=""></div>
32     </div>
33     <!-- 产品内容 -->
34     <!-- 底部 -->
35     <div id="footer" class="container"></div>

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;}

jQuery代码：

 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