富贵资源网 Design By www.hznty.com
不知道大家有没有注意到有的网页由于页面信息量太大所以使用了页面定位导航来实现跳转，点击旁边的菜单的某一项页面就跳到那一项对应的内容，而且我们滚动滚动条，当滚动到某一项内容，旁边菜单对应的那一项也会高亮显示。今天我就来讲讲这样的效果是如何实现的。
先贴上显示效果：
实现：
这个的页面布局很简单，大家下去多试试就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="/UploadFiles/2021-04-02/1.jpg">以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
暂无评论...