网站前端制作之Jq导航栏顶部固定跟随

2023-03-10    分类： 网站建设

导航栏固定顶部跟随效果在网站上是很常见的，许多页面内容很长时，需要这种效果来迅速跳转不同页面区域，今天来写一个比较简单的导航栏固定顶部跟随效果的demo。

前端效果展示

效果如图：

HTML代码

HTML如图：

CSS代码

CSS如图：

JS代码

JS代码2

JS如图：
这里主要讲解的是js部分，demo引入了jQuery，使用jQuery语法先声明navTop把导航栏（#navBox）距离顶部的距离赋值给它，在写一个滚动事件的函数（scroll（）），获取滚动条距离顶部的距离 赋值给scrollTop，在滚动函数里用if判断比较这个的值，当scrollTop大于等于navTop，添加一个样式类名，使其定位在页面顶部，反之，删除此类名还原导航栏。
当滑动滚动条时，页面区域滚动到不同区域，导航栏需要相对应到不同区域的a链接是选中的状态，这就要先获取每个区域距离顶部的值，先声明一个arr空数组，然后each循环每个区域模块距离顶部的值，通过push添加每个值到arr数组里，最后触发滚动函数时，for循环里通过i++条件和if判断当前滚动条距离顶部的值大于等于第i个的值和state的布尔值，通过下标同样设置a链接添加选中类名，滚动事件结束时设置state的值为true，防止点击a链接时添加类名对应不上。

网页标题：网站前端制作之Jq导航栏顶部固定跟随
文章起源：https://www.cdcxhl.com/news27/243027.html

成都网站建设公司_创新互联，为您提供ChatGPT、商城网站、定制开发、域名注册、建站公司、网站策划

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

h5响应式网站建设

网站建设知识

各行业网站