jquery实现网页定位导航


Posted in Javascript onAugust 23, 2016

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

先贴上显示效果: 

jquery实现网页定位导航

jquery实现网页定位导航

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 () {
 //监听滚动条
 $(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');
 }
 });
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
兼容FF和IE的动态table示例自写
Oct 21 Javascript
jquery对table中各数据的增加、保存、删除操作示例
May 14 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
May 27 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
详解vue-cli中使用rem,vue自适应
May 06 Javascript
vue+elementUi图片上传组件使用详解
Aug 20 Javascript
javascript实现左右缓动动画函数
Nov 25 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
Jquery组件easyUi实现手风琴(折叠面板)示例
Aug 23 #Javascript
Javascript将JSON日期格式化
Aug 23 #Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 #Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 #Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 #Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 #Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 #Javascript
You might like
PHP print类函数使用总结
2010/06/25 PHP
PHP文件注释标记及规范小结
2012/04/01 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十)
2014/06/24 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
jQuery的强大选择器小结
2009/12/27 Javascript
基于JQuery的cookie插件
2010/04/07 Javascript
使用jquery动态加载javascript以减少服务器压力
2012/10/29 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
js中function()使用方法
2013/12/24 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
在JavaScript中处理数组之reverse()方法的使用
2015/06/09 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
Linux CentOS7下安装python3 的方法
2018/01/21 Python
Python装饰器原理与用法分析
2018/04/30 Python
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
详解Python 切片语法
2019/06/10 Python
python 用户交互输入input的4种用法详解
2019/09/24 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
应届毕业生求职自荐书
2014/01/03 职场文书
英文自荐信常用句子
2014/03/26 职场文书
教师求职自荐信范文
2015/03/04 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记