首頁 > 開發者 > JavaScript
jquery實現網頁定位導航，jquery實現導航
不知道大家有沒有注意到有的網頁由於頁面資訊量太大所以使用了頁面定位導航來實現跳轉，點擊旁邊的菜單的某一項頁面就跳到那一項對應的內容，而且我們滾動捲軸，當滾動到某一項內容，旁邊菜單對應的那一項也會高亮顯示。今天我就來講講這樣的效果是如何?的。
先貼上顯示效果：
實現：
這個的頁面配置很簡單，大家下去多試試就OK了，值得注意的是需要在菜單布局裡的每一個li裡面添加a標籤並且給a標籤的 href 賦上對應的id號，可以讓其點擊立即跳到id對應的內容
然後就是jquery是如何?的：
1.我們需要使用$(document).scrollTop()擷取捲軸相對頂部的高度
2.通過$('#content').find('.item')[index].offset().top擷取每一塊內容相對頂部的高度（我是在id為content的div裡包含了5個class為item的div，每個item對應一個板塊的內容）
3.然後比較每一個板塊的$(document).scrollTop()是否大於$('#content').find('.item')[index].offset().top,若大於說明頁面已經來到了對應板塊。
4.最後通過removeClass移除之前的高亮，給對應項添加addClass增加高亮
代碼：
下面是我寫的具體的demo,供大家參考：
index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>網頁定位導航</title> <link rel="stylesheet" type="text/css" href="style.css"></head><body> <div id="menu"> <ul> <li><a href="#item1" class="current">1F 男裝</a></li> <li><a href="#item2">2F 女裝</a></li> <li><a href="#item3">3F 美妝</a></li> <li><a href="#item4">4F 數位</a></li> <li><a href="#item5">5F 生活</a></li> </ul> </div> <div id="content"> <h1>XX購物網</h1> <div id="item1" class="item"> <h2>1F 男裝</h2> <ul> <li><a href=""><img src="images/1.jpg"></a></li> <li><a href=""><img src="images/1.jpg"></a></li> <li><a href=""><img src="images/1.jpg"></a></li> <li><a href=""><img src="images/1.jpg"></a></li> <li><a href=""><img src="images/1.jpg"></a></li> <li><a href=""><img src="images/1.jpg"></a></li> <li><a href=""><img src="images/1.jpg"></a></li> <li><a href=""><img src="images/1.jpg"></a></li> <li><a href=""><img src="images/1.jpg"></a></li> </ul> </div> <div id="item2" class="item"> <h2>2F 女裝</h2> <ul> <li><a href=""><img src="images/2.jpg"></a></li> <li><a href=""><img src="images/2.jpg"></a></li> <li><a href=""><img src="images/2.jpg"></a></li> <li><a href=""><img src="images/2.jpg"></a></li> <li><a href=""><img src="images/2.jpg"></a></li> <li><a href=""><img src="images/2.jpg"></a></li> <li><a href=""><img src="images/2.jpg"></a></li> <li><a href=""><img src="images/2.jpg"></a></li> <li><a href=""><img src="images/2.jpg"></a></li> </ul> </div> <div id="item3" class="item"> <h2>3F 美妝</h2> <ul> <li><a href=""><img src="images/3.jpg"></a></li> <li><a href=""><img src="images/3.jpg"></a></li> <li><a href=""><img src="images/3.jpg"></a></li> <li><a href=""><img src="images/3.jpg"></a></li> <li><a href=""><img src="images/3.jpg"></a></li> <li><a href=""><img src="images/3.jpg"></a></li> <li><a href=""><img src="images/3.jpg"></a></li> <li><a href=""><img src="images/3.jpg"></a></li> <li><a href=""><img src="images/3.jpg"></a></li> </ul> </div> <div id="item4" class="item"> <h2>4F 數位</h2> <ul> <li><a href=""><img src="images/4.jpg"></a></li> <li><a href=""><img src="images/4.jpg"></a></li> <li><a href=""><img src="images/4.jpg"></a></li> <li><a href=""><img src="images/4.jpg"></a></li> <li><a href=""><img src="images/4.jpg"></a></li> <li><a href=""><img src="images/4.jpg"></a></li> <li><a href=""><img src="images/4.jpg"></a></li> <li><a href=""><img src="images/4.jpg"></a></li> <li><a href=""><img src="images/4.jpg"></a></li> </ul> </div> <div id="item5" class="item"> <h2>5F 生活</h2> <ul> <li><a href=""><img src="images/5.jpg"></a></li> <li><a href=""><img src="images/5.jpg"></a></li> <li><a href=""><img src="images/5.jpg"></a></li> <li><a href=""><img src="images/5.jpg"></a></li> <li><a href=""><img src="images/5.jpg"></a></li> <li><a href=""><img src="images/5.jpg"></a></li> <li><a href=""><img src="images/5.jpg"></a></li> <li><a href=""><img src="images/5.jpg"></a></li> <li><a href=""><img src="images/5.jpg"></a></li> </ul> </div> </div><script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="script.js"></script></body></html> style.css *{ margin: 0; padding: 0;}body{ font-size: 12px; line-height: 1.7;}li{ list-style: none;}#content{ width: 800px; margin: 0 auto; padding: 20px;}#content h1{ color: #0088bb;}#content .item{ padding: 20px; margin-bottom: 20px; border: 1px dotted #0088bb;}#content .item h2{ font-size: 16px; font-weight: bold; border-bottom: 2px solid #0088bb; margin-bottom: 10px;}#content .item ul{ width: 740px; margin: 0 auto;}#content .item li{ display: inline; margin-right: 10px;}#content .item li a img{ width: 230px; height: 230px; border: none;}#menu{ position: fixed;/*固定定位*/ top: 100px; left: 50%; margin-left: 400px; width: 80px;}#menu ul li a{ display: block; margin: 5px 0; font-size: 14px; font-weight: bold; color: #333; width: 80px; height: 50px; line-height: 50px; text-decoration: none;/*去掉超連結的底線*/ text-align: center;}#menu ul li a:hover,#menu ul li a.current{ color: #fff; background: #0088bb;}/*ie6 hack 相容ie的設定*/* html, * html body { background-image: url(about:blank); background-attachment: fixed;}* html #menu { /*position: fixed;*/ position: absolute; top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');} script.js $(document).ready(function () { //監聽捲軸 $(window).scroll(function () { //擷取捲軸到頂部的距離 var top = $(document).scrollTop(); var menu = $('#menu'); var items = $('#content').find('.item'); var currentId = "";//當前所在的樓層是(item) id items.each(function(){ var s = $(this); //擷取item到頂部的距離 即各個樓層到頂部的距離 var itemTop = s.offset().top; //判斷捲軸到頂部的距離是否大於item到頂部的距離，大於則說明當前頁面已經顯示到了當前item即樓層 if(top > itemTop-200){ //取到當前樓層 currentId = "#" + s.attr("id"); }else{ return false; } }); //給相應樓層的a設定current，取消其他連結的current var currentLink = menu.find(".current"); //判斷currentId是否有值，當前有current的item是否等於要添加current的item,有就不必改變，沒有就更改item的current,current是顯示高亮的css類 if(currentId && currentLink.attr("href") != currentId ){ //移除有高亮的 currentLink.removeClass('current'); //添加當前頁面顯示樓層對應的菜單選項的高亮 menu.find("[href=" + currentId +"]").addClass('current'); } });});
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
