jQuery仿京東商城樓梯式導航定位菜單
更新時間：2021年09月23日 08:57:04 作者：macanfa
這篇文章主要介紹了jQuery仿京東商城樓梯式導航定位菜單的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實現(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> <!-- 導航菜單 --> <!-- 產品內容 --> <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> <!-- 產品內容 --> <!-- 底部 --> <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結構設計，需要理清滾動導航時候的條件判斷。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
jQuery 1.4給開發(fā)者帶來了很多值得興奮的新特性，同時使用jQuery的人也越來越多，為了方便大家對jQuery的使用，下面列出了一些jQuery使用技巧。2010-11-11
jQuery.validate 常用方法及需要注意的問題，需要的朋友可以參考一下2013-03-03
這篇文章主要介紹了easyUI 實現(xiàn)的后臺分頁與前臺顯示功能,結合實例形式分析了easyUI 后臺數(shù)據(jù)交互、分頁與前臺顯示相關操作技巧及注意事項,需要的朋友可以參考下2020-06-06
這篇文章主要介紹了如何使用CSS3+JQuery實現(xiàn)懸浮墻式菜單,由于現(xiàn)在很流行的基礎觸摸的web站點可以運行在移動設備上，我認為我們可以讓那些基于桌面瀏覽器的人們使用站點更加簡單。,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了jQuery簡單實現(xiàn)中間浮窗效果,涉及jQuery事件響應及動態(tài)操作頁面元素屬性的相關技巧,需要的朋友可以參考下2016-09-09
讀取URL參數(shù)的方法各種各樣不過大同小異，下面本文使用jquery來實現(xiàn)讀取URL參數(shù)示例，感興趣的朋友可以練練手哦2013-08-08
html5的自定義data-*屬性和jquery的data()方法的使用示例
人們總喜歡往HTML標簽上添加自定義屬性來存儲和操作數(shù)據(jù)，這就是為什么在HTML5規(guī)范里增加了一個自定義data屬性，你可以拿它做很多有用的事情2013-08-08
JQuery實現(xiàn)列表中復選框全選反選功能封裝(推薦)
在做列表時經常會遇到全選，反選進行批量處理問題。通過本文給大家介紹JQuery實現(xiàn)列表中復選框全選反選功能封裝，對jq復選框全選反選功能感興趣的朋友一起看看吧2016-11-11
用 jQuery 綁定和解綁事件監(jiān)聽器都是非常簡單的，怎樣精確地解綁其中一個監(jiān)聽器？我們需要了解一下事件的命名空間，感興趣的朋友不要錯過2013-11-11
這篇文章主要為大家詳細介紹了jquery實現(xiàn)簡單每周輪換的日歷，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09