在网站中□□□的产品或•者案例详□□□情页，往往会被□□分成许多□□□块不同区♦域（如：产品的特□□□□性、参数、视频、文字介绍），内容多且◤过长，不方便用□□户浏览页□□面，这时就要※用到本文△章所做的□□□效果了（jq实现点击□□导航栏滚□□□□动到对应□□位置和导◤航栏菜单□□□项随页面□□滚动而变□□□化）。html如图：
 

 
css如图：
 

 
js如图：
 

如上图，先是获取□□□□页面主要•的区域的□□个数，然后触发▼鼠标滚动□□事件函数，循环获取□□□□页面导航○栏和各个□□□□块（区域）到顶部距□□离，因为导航□□栏是绝对❖定位的，它距离顶□□□部的距离□□□□也是实时◉变动的，在滚动鼠◥标触发滚□□□动事件时□□□通过for循环当页◆面的导航·栏距离顶☆部的值大◇于某一块□□□□到顶部的□□距离，而小于下□□□一块到顶◇部距离的□□□□值时，当前所在□□块的的下□□标对应导□□□航栏的下□□□□标的某一◢栏目添加□□□□选中状态，其余的删□□除选中状❖态；点击导航▽栏上的栏□□□目，获取点击□□□□栏目的下□□□□标，获取同为□□□□当前下标□□□□的内容块※到顶部的★距离，让滚动条◉到顶部的□□□□距离值为□□□当前下标□□□的内容块□□□□到顶部的◣距离。