文章/答案/技术大牛

发布

社区首页 >问答首页 >bootstrap scrollspy sidenav不起作用-选择的最后一项

问bootstrap scrollspy sidenav不起作用-选择的最后一项
EN

Stack Overflow用户

提问于 2012-11-01 22:24:02

回答 3查看 5K关注 0票数 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')加了词缀()。数据有一个ul w/ class="nav nav-tabs nav-stacked“。有一个content div w/ div.sidenav -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();

twitter-bootstrap

回答 3

Stack Overflow用户

发布于 2012-11-09 17:40:18

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

例如：

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

另一个要注意的事项是，当nav切换到固定位置时，它会改变a、b、c、d部分距顶部的偏移量，因此以前为这些部分计算的位置不再准确。

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

票数 4

Stack Overflow用户

发布于 2013-09-10 05:07:05

通常将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：通过指定body/scrollbar元素和目标导航的JavaScript调用scrollspy()方法。

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

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

票数 3

Stack Overflow用户

发布于 2013-09-27 08:33:25

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

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/13179119

复制

相似问题

问bootstrap scrollspy sidenav不起作用-选择的最后一项
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问bootstrap scrollspy sidenav不起作用-选择的最后一项EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问bootstrap scrollspy sidenav不起作用-选择的最后一项
EN