首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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');
 }
 });
});

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

jquery实现网页定位导航

- Author -

yesz12358

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
基于jquery的direction图片渐变动画效果
May 24 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
函数式 JavaScript（一）简介
Jul 07 Javascript
jQuery实现获取绑定自定义事件元素的方法
Dec 02 Javascript
jQuery插件select2利用ajax高效查询大数据列表（可搜索、可分页）
May 19 jQuery
微信小程序wx.request实现后台数据交互功能分析
Nov 25 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 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
okenizer(1) 无限迭代(1) for(1) 分词器(1) re模块(2) sched(1) 监听(2) while(1) watch(1) 事件调度器(1)
You might like
一个简单的MySQL数据浏览器
2006/10/09 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
Javascript UrlDecode函数代码
2010/01/09 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
详解Python的Django框架中的中间件
2015/07/24 Python
Python 常用模块 re 使用方法详解
2019/06/06 Python
Django 实现前端图片压缩功能的方法
2019/08/07 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
python代码实现猜拳小游戏
2020/11/30 Python
拉拉队口号
2014/06/16 职场文书
乌镇导游词
2015/02/02 职场文书
生产车间主任岗位职责
2015/04/08 职场文书
小学生光盘行动倡议书
2015/04/28 职场文书
商业计划书之服装
2019/09/09 职场文书
导游词之阆中古城
2019/12/23 职场文书