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 相关文章推荐
我也种棵OO树JXTree[js+css+xml]
Apr 02 Javascript
js客户端快捷键管理类的较完整实现和应用
Jun 08 Javascript
jquery实现html页面 div 假分页有原理有代码
Sep 06 Javascript
JavaScript中的console.group()函数详细介绍
Dec 29 Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
Node.js 使用递归实现遍历文件夹中所有文件
Sep 18 Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 06 Javascript
JavaScript实现烟花绽放动画效果
Aug 04 Javascript
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
德劲1107的电路分析与打磨
2021/03/02 无线电
我的论坛源代码(四)
2006/10/09 PHP
PHP中的替代语法介绍
2015/01/09 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
Yii框架连接mongodb数据库的代码
2016/07/27 PHP
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
jQuery图片渐变特效的简单实现
2016/06/25 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
js实现验证码功能
2020/07/24 Javascript
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
python字典排序的方法
2019/10/12 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
幼儿园安全责任书
2014/04/14 职场文书
家长会演讲稿
2014/04/26 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
幼儿园园长个人总结
2015/03/02 职场文书
致青春观后感
2015/06/09 职场文书