400-800-9385
网站建设资讯详细

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

发表日期:2021-10-08 14:47:38   作者来源:方维网络   浏览:1811   标签:网站前端制作    
导航栏固定顶部跟随效果在网站上是很常见的,许多页面内容很长时,需要这种效果来迅速跳转不同页面区域,今天来写一个比较简单的导航栏固定顶部跟随效果的demo。
效果如图:

前端效果展示

HTML如图:

HTML代码

CSS如图:

CSS代码

JS如图:

JS代码

JS代码2


这里主要讲解的是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链接时添加类名对应不上。

先声明state不赋值,当点击导航栏的a链接时把布尔值false赋值给state,同时页面会显示根据a链接href值的id跳转到相对应id的区域模块。
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/6236.html