Twitter bootstrap 引导scrollspy sidenav不工作-选择的最后一项_Twitter Bootstrap

Twitter bootstrap 引导scrollspy sidenav不工作-选择的最后一项

twitter-bootstrap

Twitter bootstrap 引导scrollspy sidenav不工作-选择的最后一项,twitter-bootstrap,Twitter Bootstrap,我正试图让一个粘性的自高亮sidenav工作，我花了很长时间才弄清楚我遗漏了什么。内容包括data spy=“scroll”data target=“.sidenav”属性，但只有sidenav中的最后一个项目高亮显示，滚动时没有一个sidenav项目高亮显示。我有一个JSFIDLE示例：（调整结果窗格的宽度，使.sidenav浮动到左侧）遵循文档 $（'.sidenav'）是词缀（）'ed。div.sidenav有一个ul w/class=“nav nav tabs nav stacke

我正试图让一个粘性的自高亮sidenav工作，我花了很长时间才弄清楚我遗漏了什么。内容包括data spy=“scroll”data target=“.sidenav”属性，但只有sidenav中的最后一个项目高亮显示，滚动时没有一个sidenav项目高亮显示。我有一个JSFIDLE示例：

（调整结果窗格的宽度，使.sidenav浮动到左侧）

遵循文档

$（'.sidenav'）是词缀（）'ed。div.sidenav有一个ul w/class=“nav nav tabs nav stacked”。有一个content div w/data spy=“scroll”data target=“.sidenav”，但在页面加载时，导航中的最后一个项目会高亮显示，滚动上没有任何更新。我错过了什么

html:

js:

我自己也遇到了类似的问题。首先，将data spy=“scroll”和data target=“.sidenav”属性添加到body标记中。如果在DOM中添加得更深，以致nav元素位于添加属性的位置之外，则无法正常工作

e、 g

另一个需要注意的事项是，当导航切换到固定位置时，它会改变a、b、c、d区段与顶部的偏移量，因此以前为区段计算的位置不再准确

下面是添加到body标记的属性的示例：

通常将

数据间谍

和

数据目标

属性添加到body标记。造成混淆的原因是人们认为可以将这些数据属性添加到内容周围的其他元素中。事实上，您可以将这些数据属性添加到页面中另一个元素的“spy”中，但该元素必须有自己的嵌套滚动条。除非元素有自己的滚动条，否则它不会触发滚动事件

另外，您还可以使用JavaScript方法而不是使用数据属性连接scrollspy

所以你有几个选择

选项1：将

数据间谍

和

数据目标

属性添加到body标签

<body data-spy="scroll" data-target=".sidenav">

这是一个演示页面：

我也有同样的问题。我通过更改Javascript在第一个锚点上应用

scrollspy（）

方法解决了这个问题：

$('#a').scrollspy();

哦，就像其他人说的，

数据间谍

和

数据目标

属性也应该在body标签中。

选项1对我有效；对于失败原因的详细解释，我也要感谢你。

$('.sidenav').affix();

<body data-spy="scroll" data-target=".sidenav" >

<body data-spy="scroll" data-target=".sidenav">

<div data-spy="scroll" data-target=".sidenav" 
 style="overflow-y:scroll; height:200px;">

<script>
        $(function() {
            $('body').scrollspy({ target: '.sidenav' });
        });
</script>

$('#a').scrollspy();