Twitter bootstrap 3 更改scrollspy的活动导航栏颜色

我正在使用引导scrollspy更新导航栏。我想更改

导航栏上突出显示的活动
li
的颜色，以匹配匹配部分的
背景颜色。但它是动态内容

我知道data spy
属性的作用和使用方法，但我不知道scrollspy插件在引擎盖下是如何工作的。所以我可以自己编写代码来处理它



引导示例
身体{
位置：相对位置；
}
#第1节{填充顶部：50px；高度：500px；颜色：#fff；背景色：#1E88E5；}
#第2节{填充顶部：50px；高度：500px；颜色：#fff；背景色：#673ab7；}
#第3节{填充顶部：50px；高度：500px；颜色：#fff；背景色：#ff9800；}
#第41节{填充顶部：50px；高度：500px；颜色：#fff；背景色：#00bcd4；}
#第42节{填充顶部：50px；高度：500px；颜色：#fff；背景色：#009688；}











第一节
尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏

尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏

第二节
尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏

尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏

第三节
尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏

尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏

第4节子菜单1
尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏

尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏

第4节子菜单2
尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏

尝试滚动此部分，并在滚动时查看导航栏！尝试滚动此部分，并在滚动时查看导航栏

如果您想更改活动（突出显示）导航栏项的背景以匹配当前部分的背景，我会这样做：

首先，收听
activate.bs.scrollspy
事件。每当scrollspy移动到新节时，将触发此事件。如果滚动监视
主体
元素，则在带有
data spy=“scroll”
或
窗口的元素上会发生这种情况

在该事件处理程序中，查找
.active
以确定哪个部分处于活动状态。您要找的是












第一节
Lorem ipsum dolor sit amet，奉献精英。我的脸上长满了铜，我的脸上长满了我的名字！这是自由的多洛雷斯，普罗维登特·雷佩拉特。德莱尼蒂·奥姆尼斯，等等

第二节
Lorem ipsum dolor sit amet，奉献精英。我的脸上长满了铜，我的脸上长满了我的名字！这是自由的多洛雷斯，普罗维登特·雷佩拉特。德莱尼蒂·奥姆尼斯，等等

Lorem ipsum dolor sit amet，奉献精英。化名，流动资金，建筑师减去nemo nihil odio quam Temporale。这是上帝的罪过。面部缺失性睑下垂

第3.1节
Lorem ipsum dolor sit amet，奉献精英。我的脸上长满了铜，我的脸上长满了我的名字！这是自由的多洛雷斯，普罗维登特·雷佩拉特。德莱尼蒂·奥姆尼斯，等等

Lorem ipsum dolor sit amet，奉献精英。化名，流动资金，建筑师减去nemo nihil odio quam Temporale。这是上帝的罪过。面部缺失性睑下垂

第3.2节
Lorem ipsum dolor sit amet，奉献精英。我的脸上长满了铜，我的脸上长满了我的名字！这是自由的多洛雷斯，普罗维登特·雷佩拉特。德莱尼蒂·奥姆尼斯，等等

Lorem ipsum dolor sit amet，奉献精英。化名，流动资金，建筑师减去nemo nihil odio quam Temporale。这是上帝的罪过。面部缺失性睑下垂

第3.3节
Lorem ipsum dolor sit amet，奉献精英。我的脸上长满了铜，我的脸上长满了我的名字！这是自由的多洛雷斯，普罗维登特·雷佩拉特。德莱尼蒂·奥姆尼斯，等等

同侧阴唇
#navbar.bg-section2 .active a  {
  background-color: #28a745;
}