3

我正试图让一个粘性的自我突出显示 sidenav 工作，并且有一段时间弄清楚我错过了什么。内容包括 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"。有一个带有 data-spy="scroll" data-target=".sidenav" 的内容 div，然而，在页面加载时，导航中的最后一项被突出显示，滚动时没有任何更新。我错过了什么？

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();
4

3 回答 3

4

我自己也遇到过类似的问题。首先，将 data-spy="scroll" 和 data-target=".sidenav" 属性添加到 body 标签。当在 DOM 中更深地添加时，它无法正常工作，这样 nav 元素就在添加属性的位置之外。

例如

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

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

这是您将属性添加到正文标记的示例：http: //jsfiddle.net/b8JkE/50/

于 2012-11-09T09:40:18.300 回答
3

您通常将data-spyanddata-target属性添加到 body 标记。混淆的根源在于您可以将这些数据属性添加到内容周围的其他元素中。事实上，您可以将这些数据属性添加到页面中另一个元素的“spy”，但该元素必须有自己的嵌套滚动条。一个元素不会触发滚动事件，除非它有自己的滚动条。 这是您更新的 JSFiddle，我在其中添加了一个滚动条。

顺便说一句，您还可以使用 JavaScript 方法而不是使用数据属性来连接 scrollspy。

所以你在这里有几个选择。

选项 1 ：向 body 标签添加 data-spy和属性。data-target

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

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

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

选项 3：scrollspy()通过 JavaScript 调用方法，指定 body/scrollbar 元素和目标导航。

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

这是一个演示页面：http ://www.lawruk.com/blog/60/twitter-bootstrap-fixed-navigation-with-scrollspy-example

于 2013-09-09T21:07:05.237 回答
0

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

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

哦，就像其他人说的那样，data-spyanddata-target属性也应该在 body 标记中。

于 2013-09-27T00:33:24.660 回答