實現(xiàn)京東商城樓梯式導航定位菜單：滾動定位菜單項和點擊定位菜單項！
涉及知識點：find()、parent()、offset(）、scroll()等jQ函數(shù)，請自覺復習各種函數(shù)！
html代碼：
<!-- 導航菜單 --> <div id="menu"> <ul> <li>1F<span>服飾</span></li> <li>2F<span>美妝</span></li> <li>3F<span>手機</span></li> <li>4F<span>家電</span></li> <li>5F<span>數(shù)碼</span></li> <li>6F<span>運動</span></li> <li>7F<span>居家</span></li> <li>8F<span>母嬰</span></li> <li>9F<span>食品</span></li> <li>10F<span>圖書</span></li> <li>11F<span>服務</span></li> </ul> </div> <!-- 導航菜單 --> <!-- 產(chǎn)品內容 --> <div id="content"> <img src="images/head.png" alt="" style="border:1px solid red;"> <div class="louti" id="louti1"><img src="images/f1.png" alt=""></div> <div class="louti" id="louti2"><img src="images/f2.png" alt=""></div> <div class="louti" id="louti3"><img src="images/f3.png" alt=""></div> <div class="louti" id="louti4"><img src="images/f4.png" alt=""></div> <div class="louti" id="louti5"><img src="images/f5.png" alt=""></div> <div class="louti" id="louti6"><img src="images/f6.png" alt=""></div> <div class="louti" id="louti7"><img src="images/f7.png" alt=""></div> <div class="louti" id="louti8"><img src="images/f8.png" alt=""></div> <div class="louti" id="louti9"><img src="images/f9.png" alt=""></div> <div class="louti" id="louti10"><img src="images/f10.png" alt=""></div> <div class="louti" id="louti11"><img src="images/f11.png" alt=""></div> </div> <!-- 產(chǎn)品內容 --> <!-- 底部 --> <div id="footer" class="container"></div>
css代碼：
#menu{ width:32px;height:360px; position:fixed; top:200px;left:0px; display: none; } #menu ul li{ width:32px;height:32px; list-style-type:none; color:#8F8583; text-align:center; line-height: 32px; border-bottom:1px dotted #ddd; position:relative; } #menu ul li span{ display:block;width:32px;height:32px; background:#C81623; position:absolute; top:0;left:0; color:#fff;font-size:12px; display: none; } #menu ul li:hover span{display:block; } #menu ul li span.active{color:#C81623;background:#fff;display:block;} #content{ width:1220px; margin:0 auto; } #footer{width:1220px;height:600px;background:#FE7678;} .container{margin:0 auto;}jQuery代碼：
$(function(){ var _index=0; $("#menu ul li").click(function(){ $(this).find("span").addClass("active").parent().siblings().find("span").removeClass("active"); _index=$(this).index()+1; //通過拼接字符串獲取元素，再取得相對于文檔的高度 var _top=$("#louti"+_index).offset().top; //scrollTop滾動到對應高度 $("body,html").animate({scrollTop:_top},500); }); var nav=$("#menu"); //得到導航對象 var win=$(window); //得到窗口對象 var sc=$(document);//得到document文檔對象。 win.scroll(function(){ if(sc.scrollTop()>=600){ $("#menu").show(); //獲取滾動元素對應的索引!!!重難點 var index=Math.floor(sc.scrollTop()/600); $("#menu ul li span").eq(index-1).addClass("active").parent().siblings().find("span").removeClass("active"); }else{ $("#menu").hide(); } }); });滾動中常用到的jQ寫法：
$("body,html").animate({scrollTop:_top},500);
總結：相對來說，這是個蠻有趣的實踐案例，但其中用到比較多的函數(shù)，結合了本案例比較特殊的html結構設計，需要理清滾動導航時候的條件判斷。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
