Twitter Bootstrap Scrollspy 根本不工作答案

【问题标题】：Twitter Bootstrap Scrollspy not working at allTwitter Bootstrap Scrollspy 根本不工作
【发布时间】：2013-01-24 21:22:44
【问题描述】：

我之前问过一个关于 Bootstrap ScrollSpy 的问题，这是我试图让它发挥作用的最后一次尝试。

我想要实现的是在该部分滚动时更改导航栏标签的颜色。我尝试了很多方法，甚至有一个 Jsfiddle 工作，但即使我的应用程序中的设置也不起作用

这就是我所拥有的

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

身体

<body data-spy="scroll" data-target="#spyOnThis">

查看

<div class="container">
 <div class="row show-grid clear-both">
  <div id="left-sidebar" class="span3 sidebar">
  <div class="side-nav sidebar-block">
    <h3 class="resultTitle fontSize13">Release Dates</h2>
    <ul class="date">
      <% @response.each_pair do |date, movie| %>
      <li><i class="icon-chevron-right"></i><%= link_to date_format(date), "#d_#{date}", :id=> '#d_#{date}' %></li>
    <% end %>
    </ul>
  </div>
</div>
<div class="span9">
  <div id="dateNav">
    <ul class="nav">
      <li><% @response.each_pair do |date, movie| %><%= link_to date_format(date), "#d_#{date}" %><% end %></li>
    </ul>
  </div>
  <div id="spyOnThis">
  <% @response.each_pair do |date, movie| %>
    <h3 class="resultTitle fontSize13" id="d_<%= date %>">Available on&nbsp;<%= date_format(date) %></h3>
    <% movie.each do |m| %>
      <div class="thumbnail clearfix">
        <img class="pull-left" src=<% if m.image_link %> <%= m.image_link %> <% else %> "/assets/noimage.jpg" <% end %>>
        <div class="caption pull-right">
          <%= link_to m.name, m.title_id, :class => 'resultTitle fontSize11' %>
          <p class="bio"><%= m.bio %></p>
          <p class="resultTitle">Cast</p>
          <p class="bio"><%= m.cast.join(", ") unless m.cast.empty? %></p>
          <%= link_to "Remind me", reminders_path(:title_id => m.title_id), :method => :post, :class => 'links button' %>
        </div>
      </div>

    <% end %>
  <% end %>
  </div>
</div><!--span9-->
</div><!--Row-->
</div><!--/container-->

CSS

#dateNav{
position: fixed;
top: 0; left: 20px;
width: 100%;
background:none;
text-align:center;
}

#spyOnThis {
 height:100%;
 overflow:auto;
}

 .nav > li > a {
  display:block;
  }

.nav > li.active > a {
 display:block;
 color: red;
 text-decoration: underline;
 }

我知道高度 100% 可能会导致问题，但我的滚动条的高度将取决于内容，并且可能会发生变化。

我现在要拔头发了，我读到这个卷轴间谍有很多错误，但肯定它必须像他们网站上的演示一样工作

编辑

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

<body data-spy="scroll" data-target="#dateNav">

HTML

ul class="nav">
 <li>
 <a href="#d_2013-01-09">9th Jan 2013</a>
 <a href="#d_2013-01-11">11th Jan 2013</a>
 <a href="#d_2013-01-18">18th Jan 2013</a>
 <a href="#d_2013-01-23">23rd Jan 2013</a>
 <a href="#d_2013-01-25">25th Jan 2013</a>
 <a href="#d_2013-01-30">30th Jan 2013</a>
 </li>

<div id="spyOnThis">
 <h3 id="d_2013-01-09" class="resultTitle fontSize13">Available on 9th Jan 2013</h3>
 <div class="thumbnail clearfix">
 <h3 id="d_2013-01-11" class="resultTitle fontSize13">Available on 11th Jan 2013</h3>
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
 <h3 id="d_2013-01-18" class="resultTitle fontSize13">Available on 18th Jan 2013</h3>
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
 <h3 id="d_2013-01-23" class="resultTitle fontSize13">Available on 23rd Jan 2013</h3>
 <div class="thumbnail clearfix">
 <h3 id="d_2013-01-25" class="resultTitle fontSize13">Available on 25th Jan 2013</h3>
 </div>

这会将所有链接变为红色，因此它们现在都处于活动状态？

我的身体也是 100% 的粘性页脚，不确定这是否会有所不同非常感谢您的帮助

【问题讨论】：

应该将 id="d_<%= date %>" 从您的 H3 标签移动到 <% movie.each do |m| %> <div id="d_<%= date %>" class="thumbnail clearfix">。我自己是 ScrollSpy 的新手，但我相信您缺少“盒子”的 id。
我不这么认为，因为在我的情况下，h3 开始了电影的每个部分，所以我希望 h3 成为触发器
只是验证您在正文标签中设置了dateNav，而不是navbar。您的输出副本也会有所帮助。
我已经更新了我的问题，输出？你想看什么？
谢谢，只是您的<ul class="nav"> 和<div id="spyOnThis"> 的html 示例。

标签： twitter-bootstrap scroll

【解决方案1】：

您需要从正文中移动 data-spy 和 data-target 属性：

<body data-spy="scroll" data-target="#dateNav">

并将它们移动到 div "spyOnThis"：

<div id="spyOnThis">

应该是：

<div id="spyOnThis" data-spy="scroll" data-target="#dateNav">

根据documentation：

“要轻松地将滚动监视行为添加到您的顶栏导航，只需将 data-spy="scroll" 添加到您要监视的元素（通常是正文）和 data-target=".navbar" 到选择要使用的导航。您需要使用带有 .nav 组件的 scrollspy。”

根据您的 HTML，您还需要修复一些问题：

您的列表标签未关闭：

<ul class="nav">
    <li>
        <a href="#d_2013-01-09">9th Jan 2013</a>
        <a href="#d_2013-01-11">11th Jan 2013</a>
        <a href="#d_2013-01-18">18th Jan 2013</a>
        <a href="#d_2013-01-23">23rd Jan 2013</a>
        <a href="#d_2013-01-25">25th Jan 2013</a>
        <a href="#d_2013-01-30">30th Jan 2013</a>
    </li>
</ul>

应该是：

<ul class="nav dateNav">
    <li><a href="#d_2013-01-09">9th Jan 2013</a></li>
    <li><a href="#d_2013-01-11">11th Jan 2013</a></li>
    <li><a href="#d_2013-01-18">18th Jan 2013</a></li>
    <li><a href="#d_2013-01-23">23rd Jan 2013</a></li>
    <li><a href="#d_2013-01-25">25th Jan 2013</a></li>
    <li><a href="#d_2013-01-30">30th Jan 2013</a></li>
</ul>

您的 div 也没有正确关闭：

<div id="spyOnThis">
 <h3 id="d_2013-01-09" class="resultTitle fontSize13">Available on 9th Jan 2013</h3>
 <div class="thumbnail clearfix">
 <h3 id="d_2013-01-11" class="resultTitle fontSize13">Available on 11th Jan 2013</h3>
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
 <h3 id="d_2013-01-18" class="resultTitle fontSize13">Available on 18th Jan 2013</h3>
 <div class="thumbnail clearfix">
 <div class="thumbnail clearfix">
     <h3 id="d_2013-01-23" class="resultTitle fontSize13">Available on 23rd Jan 2013</h3>
     <div class="thumbnail clearfix">
     <h3 id="d_2013-01-25" class="resultTitle fontSize13">Available on 25th Jan 2013</h3>
 </div>

应该是（只显示其中几个）：

<div class="thumbnail clearfix">
     <h3 id="d_2013-01-23" class="resultTitle fontSize13">Available on 23rd Jan 2013</h3>
</div>
<div class="thumbnail clearfix">
     <h3 id="d_2013-01-25" class="resultTitle fontSize13">Available on 25th Jan 2013</h3>
</div>

此外，100% 的高度似乎使其仅突出显示导航栏列表中最底部的条目。

【讨论】：

感谢您的回答，虽然现在所有日期都是红色的，所以它们仍然处于活动状态？
检查列表标签的格式。您将它们作为

这是一个“工作”的 JSFiddle，我使用了你的小提琴示例中的 CSS 并将你的 HTML 添加到其中，所以它是一种混搭，但可以理解：jsfiddle.net/YqWQL 如果你设置类似于 HTML 当前的

结构，您将看到所有链接都变为红色。