jquery實現網頁定位導航

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

這篇文章主要為大家詳細介紹了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 () {
 //監(jiān)聽滾動條
 $(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');
 }
 });
});

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: