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

延伸阅读

• 小程序名字修改的技巧规则

  我们都知道名字的意义，名称作为陌生人最先的认知，在物质喧嚣的时代，如何从众多名称中脱颖而出给陌人生留下一个良好且深刻的印象，这至关重要。随着小程序开发越来越多，运营者在给小程序...

• 小程序商城怎么运营？

  小程序商城在当今电商领域日益受到瞩目，成功运营这样一个平台对于每个经营者而言都至关重要。那么，我们该如何着手呢?一、确立品牌方向首先，我们要清晰地定义自己的品牌在市场中的位置。...

• 自建商城运营秘籍，吸引顾客有妙招！

  新建网站的运营与维护之道一、明确核心产品的市场定位要让新建的商城网站在竞争激烈的市场中脱颖而出，关键在于精准地定位核心产品。选择具有市场潜力的热销产品，并突出其独特之处，是吸引...

• 小程序商城推广完全指南

  随着小程序商城的日益兴起，如何在竞争激烈的市场中脱颖而出成为了关键。小程序商城的推广方式多种多样，以下是一些有效的策略：1.公众号与小程序的结合：商家可以将小程序与公众号绑定，...

• 推广引流方法有哪些，裂变营销什么意思

  推广引流方法有哪些，裂变营销什么意思除了各公域平台，另一个比较重要的引流场景，就是在微信中。一方面做信社交性强，对于身边用友的链接更紧密，微信上也会以群、公众号的形式聚集一群有...