快捷導(dǎo)航

jquery實(shí)現(xiàn)網(wǎng)頁定位導(dǎo)航

更新時(shí)間：2016年08月23日 17:03:34 作者：yesz12358

這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)網(wǎng)頁定位導(dǎo)航，具有一定的實(shí)用價(jià)值和參考價(jià)值，感興趣的小伙伴們可以參考一下

不知道大家有沒有注意到有的網(wǎng)頁由于頁面信息量太大所以使用了頁面定位導(dǎo)航來實(shí)現(xiàn)跳轉(zhuǎn)，點(diǎn)擊旁邊的菜單的某一項(xiàng)頁面就跳到那一項(xiàng)對(duì)應(yīng)的內(nèi)容，而且我們滾動(dòng)滾動(dòng)條，當(dāng)滾動(dòng)到某一項(xiàng)內(nèi)容，旁邊菜單對(duì)應(yīng)的那一項(xiàng)也會(huì)高亮顯示。今天我就來講講這樣的效果是如何實(shí)現(xiàn)的。

先貼上顯示效果：

實(shí)現(xiàn)：
這個(gè)的頁面布局很簡(jiǎn)單，大家下去多試試就OK了，值得注意的是需要在菜單布局里的每一個(gè)li里面添加a標(biāo)簽并且給a標(biāo)簽的 href 賦上對(duì)應(yīng)的id號(hào)，可以讓其點(diǎn)擊立即跳到id對(duì)應(yīng)的內(nèi)容

然后就是jquery是如何實(shí)現(xiàn)的：

1.我們需要使用$(document).scrollTop()獲取滾動(dòng)條相對(duì)頂部的高度

2.通過$('#content').find('.item')[index].offset().top獲取每一塊內(nèi)容相對(duì)頂部的高度（我是在id為content的div里包含了5個(gè)class為item的div，每個(gè)item對(duì)應(yīng)一個(gè)板塊的內(nèi)容）

3.然后比較每一個(gè)板塊的$(document).scrollTop()是否大于$('#content').find('.item')[index].offset().top,若大于說明頁面已經(jīng)來到了對(duì)應(yīng)板塊。

4.最后通過removeClass移除之前的高亮，給對(duì)應(yīng)項(xiàng)添加addClass增加高亮

代碼：

下面是我寫的具體的demo,供大家參考：
index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>網(wǎng)頁定位導(dǎo)航</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 數(shù)碼</a></li>
  <li><a href="#item5">5F 生活</a></li>
 </ul>
 </div>
 <div id="content">
 <h1>XX購物網(wǎng)</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 數(shù)碼</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的設(shè)置*/
* 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 () {
 //監(jiān)聽滾動(dòng)條
 $(window).scroll(function () {
 //獲取滾動(dòng)條到頂部的距離
 var top = $(document).scrollTop();
 var menu = $('#menu');
 var items = $('#content').find('.item');
 var currentId = "";//當(dāng)前所在的樓層是(item) id
 items.each(function(){
  var s = $(this);
  //獲取item到頂部的距離 即各個(gè)樓層到頂部的距離
  var itemTop = s.offset().top;
  //判斷滾動(dòng)條到頂部的距離是否大于item到頂部的距離，大于則說明當(dāng)前頁面已經(jīng)顯示到了當(dāng)前item即樓層
  if(top > itemTop-200){
  //取到當(dāng)前樓層
  currentId = "#" + s.attr("id");
  }else{
  return false;
  } 
 });
 //給相應(yīng)樓層的a設(shè)置current，取消其他鏈接的current
 var currentLink = menu.find(".current");
 //判斷currentId是否有值，當(dāng)前有current的item是否等于要添加current的item,有就不必改變，沒有就更改item的current,current是顯示高亮的css類
 if(currentId && currentLink.attr("href") != currentId ){
  //移除有高亮的
  currentLink.removeClass('current');
  //添加當(dāng)前頁面顯示樓層對(duì)應(yīng)的菜單選項(xiàng)的高亮
  menu.find("[href=" + currentId +"]").addClass('current');
 }
 });
});

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: