欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2016年08月23日 17:03:34   作者：yesz12358  
這篇文章主要為大家詳細介紹了jquery實現(xiàn)網(wǎng)頁定位導航，具有一定的實用價值和參考價值，感興趣的小伙伴們可以參考一下

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

先貼上顯示效果： 



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

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

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,若大于說明頁面已經(jīng)來到了對應板塊。 

4.最后通過removeClass移除之前的高亮，給對應項添加addClass增加高亮 

代碼： 

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>網(wǎng)頁定位導航</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的設置*/
* 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到頂部的距離，大于則說明當前頁面已經(jīng)顯示到了當前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');
 }
 });
});

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

相關文章

最新評論