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="http://www.gimoo.net/t/1901/style.css">
</head>
<body>
 <div id="menu">
 <ul>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html" class="current">1F 男装</a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html">2F 女装</a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html">3F 美妆</a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html">4F 数码</a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html">5F 生活</a></li>
 </ul>
 </div>
 <div id="content">
 <h1>XX购物网</h1>
 <div id="item1" class="item">
  <h2>1F 男装</h2>
  <ul>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/1.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/1.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/1.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/1.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/1.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/1.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/1.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/1.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/1.jpg"></a></li>
  </ul>
 </div>
 <div id="item2" class="item">
  <h2>2F 女装</h2>
  <ul>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/2.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/2.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/2.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/2.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/2.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/2.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/2.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/2.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/2.jpg"></a></li>
  </ul>
 </div>
 <div id="item3" class="item">
  <h2>3F 美妆</h2>
  <ul>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/3.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/3.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/3.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/3.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/3.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/3.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/3.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/3.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/3.jpg"></a></li>
  </ul>
 </div>
 <div id="item4" class="item">
  <h2>4F 数码</h2>
  <ul>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/4.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/4.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/4.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/4.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/4.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/4.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/4.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/4.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/4.jpg"></a></li>
  </ul>
 </div>
 <div id="item5" class="item">
  <h2>5F 生活</h2>
  <ul>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/5.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/5.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/5.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/5.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/5.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/5.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/5.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/images/5.jpg"></a></li>
  <li><a href="http://www.gimoo.net/t/1901/5c2eb8f9d7a4a.html"><img src="http://www.gimoo.net/t/1901/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="http://www.gimoo.net/t/1901/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="http://www.gimoo.net/t/1901/ + currentId +"]").addClass('current');
 }
 });
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持绿夏网。

网页

#免责声明#

本站[绿夏技术导航]提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序或内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如有侵权请邮件[admin@lxwl520.com]与我们联系进行删除处理。敬请谅解！

文章分类