导航栏固◆定顶部跟◎随效果在◆网站上是□□很常见的，许多页面◎内容很长□□□时，需要这种□□□□效果来迅□□□□速跳转不♦同页面区□□域，今天来写▽一个比较□□□□简单的导□□□航栏固定□□□顶部跟随□□□□效果的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的区域模□□□□块。