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 相关文章推荐
js可突破windows弹退效果代码
Aug 09 Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
自己用jQuery写了一个图片的马赛克消失效果
May 04 Javascript
jQuery解析XML文件同时动态增加js文件的方法
Jun 01 Javascript
13个PHP函数超实用
Oct 21 Javascript
JavaScript中的对象和原型(一)
Aug 12 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
Nov 10 Javascript
Angular.JS去掉访问路径URL中的#号详解
Mar 30 Javascript
vue裁切预览组件功能的实现步骤
May 04 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 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
php 变量定义方法
2009/06/14 PHP
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
PHP 实用代码收集
2010/01/22 PHP
PHP 编写大型网站问题集
2010/05/07 PHP
PHP数据集构建JSON格式及新数组的方法
2012/11/07 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
传智播客学习之java 反射
2009/11/22 Javascript
javascript循环变量注册dom事件 之强大的闭包
2010/09/08 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
基于wordpress的ajax写法详解
2018/01/02 Javascript
node.js中path路径模块的使用方法实例分析
2020/02/13 Javascript
ES6新增的数组知识实例小结
2020/05/23 Javascript
python自动化测试之连接几组测试包实例
2014/09/28 Python
使用Python生成XML的方法实例
2017/03/21 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
学生信息管理系统python版
2018/10/17 Python
python3 实现调用串口功能
2019/12/26 Python
浅析matlab中imadjust函数
2020/02/27 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
英国床垫在线:Mattress Online
2016/12/07 全球购物
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
2014年教师党员公开承诺书
2014/05/28 职场文书
计划生育证明书写要求
2014/09/17 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书