现在我们去处理一下这个页内导航菜单项的激活状态 ... 滚动页面的时候，可以自动切换菜单项的激活状态，比如在滚动到页面 内饰 区域的时候，导航栏上的 内饰 这个菜单项是激活状态 ... 滚动到能力的时候，能力菜单项是激活状态 ..

在菜单项上添加一个 active 类，可以在菜单项上应用我们设计好的激活状态的样式 ...

这里我们可以再借助一下 semantic ui 里的 visibility 提供的功能 .. 滚动到某些的区域的时候，可以自动在对应的菜单项上添加或者移除表示菜单项激活状态的 active 这个 css 类。

先要做一件事 .. 打开 product.html ... 在子导航往下的这些内容区域的包装上面，添加一个统一的 css 类，比如 section ... 这样我们可以在自定义脚本里面，统一的得到这些带 section 类的元素 ..

再打开自定义脚本 .. 先找到页面上所有带 section 类的元素 $('.ui.section') .. 然后应用一个 visibility 方法 ... 给它一个对象参数 .. 把 observeChanges 的值设置成 false ... 再把 once 的值也设置成 false .. 然后添加一个 offset 属性，设置一点偏移量 ... 这里我把它设置成 120 ..

然后还需要两个回调 .. 一个是 onTopPassed .. 元素的顶部碰到屏幕顶部的时候会执行这个回调 .. 执行一下 sectionHandle ，一会儿再去定义这个函数 ..

再添加一个 onBottomPassedReverse .. 向上滚动页面的时候，元素的底部碰到屏幕顶部的时候会执行这个回调 .. 这个时候也去执行一下 sectionHandle ..

下面再定义一下这个函数 .. 名字是 sectionHandle ...

在函数里添加一个变量 $currentSection ... 它的值是 $(this)，这里的 this 表示当前区域 ..

就是向下滚动页面的时候，顶部碰到屏幕顶部的区域，或者向上滚动页面时，底部碰到屏幕顶部的那个区域 ..

得到了当前区域以后， 我们可以看一下当前这个区域在页面上的所有区域里的索引值是多少，也就是看一下它排第几，用这个索引值可以得到跟这个区域对应的菜单项，这样我们就可以往这个菜单项上添加一个 active 类，表示这个菜单项的激活状态 ..

添加一个表示索引值的变量，叫 index ，找到页面上的所有带 .ui.section 类的元素 .. 用一下 index 方法，把当前区域交给这个方法 ... 这样就会得到当前区域在所有区域上的索引值 ..

然后再找到子导航上的所有的菜单项目 .. let $subNavMenuItem 表示子导航里的菜单项，它的值是 $('.ui.sub.navbar .menu > .item')

现在我们可以利用上面得到的这个索引值，去找到对应的激活菜单项 .. let $subNavMenuActiveItem 等于 $subNavMenuItem.eq(index)

然后我们可以先把子导航菜单项上带 .active 类的元素上的这个 .active 类给它去掉 .. 再在当前激活状态下的菜单项上添加一个 active 类 ..

$subNavMenuItem
.filter('.active')
.removeClass('active')

$subNavMenuActiveItem
.addClass('active')

再去试一下 .. 滚动页面 ... 你会发现，页内子导航上的菜单项，会根据当前滚动到的位置，自动切换它的激活状态 ...