网站前端制作之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/news/243027.html

成都网站建设公司_创新互联,为您提供网站营销网站改版小程序开发网站排名建站公司关键词优化

广告

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

网站优化排名