导航栏流动顶部追随了局在网站上是很罕见的,很多页面内容很长时,必要这类了局来疾速跳转分歧页面地区,本日来写一个对照庞杂的导航栏流动顶部追随了局的demo。
了局如图:
HTML如图:
CSS如图:
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链接时增加类名对应不上。
先声明state不赋值,当点击导航栏的a链接时把布尔值false赋值给state,同时页面会施展阐发依据a链接href值的id跳转到相对应id的地区模块。