Question

我正试图让一个粘性的自我突出的侧面工作，并且我有一点时间弄清楚我错过了什么。内容包括data-spy =“scroll”data-target =“。sidenav”属性，但只有sidenav中的最后一项突出显示，并且没有任何sidenav项在滚动时突出显示。我有一个例子jsfiddle：

http://jsfiddle.net/b8JkE/

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

关注文档http://twitter.github.com/bootstrap/javascript.html#scrollspy

$（'。sidenav'）是affix（）'ed。 div.sidenav有一个ul w / class =“nav nav-tabs nav-stacked”。有一个内容div w / data-spy =“scroll”data-target =“。sidenav”然而，在页面加载时，导航中的最后一项突出显示，滚动时没有任何更新。我错过了什么？

HTML：

  <div class="container">
    <div class="row">
      <div class="span2 sidenav-parent">
        <div class="sidenav">
          <ul class="nav nav-tabs nav-stacked">
            <li><a href="#a">a</a></li>
            <li><a href="#b">b</a></li>
            <li><a href="#c">c</a></li>
            <li><a href="#d">d</a></li>
            <li><a href="#e">e</a></li>
          </ul>
        </div>
      </div>
      <div class="span10" id="gimmelove" data-spy="scroll" data-target=".sidenav">
        <h4 id="a">a</h4><p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party lo cavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
        <h4 id="b">b</h4><p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party lo cavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
        <h4 id="c">c</h4><p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party lo cavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
        <h4 id="d">d</h4><p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party lo cavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
        <h4 id="e">e</h4><p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party lo cavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
      </div>
    </div>
  </div>

的CSS：

body { margin-top: 20px; }
#gimmelove { background-color:#f3f3f3; }
.sidenav .active a { font-weight:600; background-color:#f3f3f3; }

JS：

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

Answer 1

我自己刚刚遇到过类似的问题。首先，将data-spy =“scroll”和data-target =“。sidenav”属性添加到body标签。当在DOM中更深入地添加时，它不能正常工作，使得nav元素位于添加属性的位置之外。

e.g。

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

要注意的另一个项目是，当导航切换到固定位置时，它会更改a，b，c，d部分顶部的偏移量，因此之前为这些部分计算的位置不再准确

以下是添加到body标记的属性的示例：http://jsfiddle.net/b8JkE/50/

Answer 2

您通常会将data-spy和data-target属性添加到body标记中。混淆的根源在于您可以将这些数据属性添加到内容周围的其他元素中。事实是，您可以将这些数据属性添加到页面中另一个元素的“间谍”，但此元素必须具有自己的嵌套滚动条。元素不会触发滚动事件，除非它有自己的滚动条。 Here is your updated JSFiddle where I took your div add added a scrollbar.

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

所以你有几个选择。

选项1 ：将data-spy和data-target属性添加到body标记中。

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

选项2 ：监视页面中的子元素，但请确保该元素有自己的滚动条。

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

选项3 ：通过JavaScript调用scrollspy()方法，指定正文/滚动条元素和目标导航。

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

以下是演示页：http://www.lawruk.com/blog/60/twitter-bootstrap-fixed-navigation-with-scrollspy-example

Answer 3

我有同样的问题。我通过更改Javascript以在第一个锚点上应用scrollspy()方法来解决这个问题：

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

哦，和其他人说的一样，data-spy和data-target属性也应该在body标签中。

bootstrap scrollspy sidenav not working - 最后一项选中

3 个答案: