当前位置: 首页 > 编程笔记 >

jquery实现网页定位导航

洪雨石
2023-03-14
本文向大家介绍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插件StickUp实现网页导航置顶,包括了jQuery插件StickUp实现网页导航置顶的使用技巧和注意事项,需要的朋友参考一下 实用的jQuery网页元素固定导航置顶插件StickUp,简单的jQuery插件,实现网页元素固定,如导航固定让其总是保持在视图中可见,在one-page页面中就可以看出效果,大家可以研究研究。 使用方法: 1.加载插件和jQuery 2.HT

  • 本文向大家介绍jquery实现企业定位式导航效果,包括了jquery实现企业定位式导航效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了jquery实现企业定位式导航的具体代码,供大家参考,具体内容如下 完整代码如下: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍javascript实现网页字符定位的方法,包括了javascript实现网页字符定位的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了javascript实现网页字符定位的方法。分享给大家供大家参考。具体如下: 这里实现输入要查询的字符串,点击定位后程序会自动跳到匹配的位置上 希望本文所述对大家的javascript程序设计有所帮助。

  • 7.2.3 导航实现03_定位 所谓定位就是推算机器人自身在全局地图中的位置,当然,SLAM中也包含定位算法实现,不过SLAM的定位是用于构建全局地图的,是属于导航开始之前的阶段,而当前定位是用于导航中,导航中,机器人需要按照设定的路线运动,通过定位可以判断机器人的实际轨迹是否符合预期。在ROS的导航功能包集navigation中提供了 amcl 功能包,用于实现导航中的机器人定位。 1.amcl

  • 本文向大家介绍Jquery网页内滑动缓冲导航的实现代码,包括了Jquery网页内滑动缓冲导航的实现代码的使用技巧和注意事项,需要的朋友参考一下 如果网页过长,需要页内导航的时候,我们一般是在目标出设置ID,比如<div id="footer"></div>,然后在当前页面某个链接地址设置如:<a href="#footer">点击指向到底部</a>,这样点击该链接后就会马上转到网页底部,默认是直接

  • 本文向大家介绍jQuery实现网页拼图游戏,包括了jQuery实现网页拼图游戏的使用技巧和注意事项,需要的朋友参考一下 之前看了一个页面中将图片分割的效果,感觉不错,有些好奇他是怎么实现的。 跟搭档说了一下,大概明白。其实就是利用 overflow=hidden ,margin-left, margin-top 这三个属性的配合,让人感觉图片被一个个格子地分开了。 刚刚写了个 Jquery的小插件