您的位置：首页 > Web前端 > JQuery

jquery实现网页定位导航

2016-08-23 13:13 627 查看

不知道大家有没有注意到有的网页由于页面信息量太大所以使用了页面定位导航来实现跳转，点击旁边的菜单的某一项页面就跳到那一项对应的内容，而且我们滚动滚动条，当滚动到某一项内容，旁边菜单对应的那一项也会高亮显示。今天我就来讲讲这样的效果是如何实现的。

先贴上显示效果：

实现：

这个的页面布局很简单，大家下去多试试就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');
}
});
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery 导航布局

相关文章推荐

新的分享

章节导航