jquery实现网页定位导航(jquery定位)

编辑：rootadmin

推荐整理分享jquery实现网页定位导航(jquery定位)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:jquery设置html,jquery写网页,jquery网页制作,jquery设置html,jquery网页设计,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

本文链接地址:https://www.jiuchutong.com/biancheng/383109.html 转载请保留说明！