网站制作之jquery页面滚动菜单栏定位跟随(深圳网站制作)

在一些前端页面中有一种效果是随着页面的下滑到不同的区域，悬浮的菜单栏随着页面滑动到不同区域定位菜单栏里不同的分类，而点击悬浮菜单栏里的分类页面会跳至到相对应的区域如下图：

html代码图如下：



css部分悬浮导航栏需要绝对定位（position：fixed），其他的就没什么需要特别说明了。
js如图：
 

如图所示，获取悬浮菜单栏距离顶部的距离，再获取当前滚动条距离顶部的距离，用if判断滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定（static），反之就不固定（fixed）。获取悬浮导航栏子目录的个数，然后为页面添加页面滚动监听事件，用循环分别获取不同区域距离顶部的距离，用if判断比较当小于等于悬浮导航栏距离顶部的距离时，对应的悬浮导航栏分类添加类名on，其余的分类有类名on的删除类名。
 
 

以上就是关于网站制作之jquery页面滚动菜单栏定位跟随(深圳网站制作)，希望对你有帮助，更多内容关注蓝港网络。

　　非常感谢您读完蓝港网络的这篇文章："网站制作之jquery页面滚动菜单栏定位跟随(深圳网站制作)"，仅为提供更多信息供用户参考使用或为学习交流的方便。我们公司提供：网站建设、网站制作、官网建设、SEO优化、小程序制作等服务，欢迎联系我们提供您的需求。