Twitter Bootstrap Scrollspy根本不工作

时间：2013-01-24 21:22:45

标签： twitter-bootstrap scroll

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

我想要实现的是在该部分中滚动时更改导航栏的颜色。我已经尝试了很多方法，甚至有Jsfiddle工作，但即使我的应用程序中的设置无法正常工作

这就是我所拥有的

JS 

$('#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％的粘性页脚，不确定这是否有所作为 帮助非常感谢

3 个答案:

答案 0 :(得分：11)

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

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

将他们移到div＆＃34; spyOnThis＆＃34;：

<div id="spyOnThis">

应该是：

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

根据documentation：

＆＃34;要轻松地将scrollspy行为添加到顶部栏导航，只需添加data-spy =＆＃34;滚动＆＃34;你希望窥探的元素（最典型的是身体）和数据目标=＆＃34; .navbar＆＃34;选择要使用的导航。您将要使用带有.nav组件的scrollspy。＆＃34;

根据您的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％高度似乎只会突出显示导航栏列表中最底部的条目。

答案 1 :(得分：2)

好的，首先你的导航链接应该单独包装在li标签中，即

    <div id="dateNav">
      <ul class="nav">
        <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"> div缺少很多结束div标签，所以它们都是嵌套的而不是彼此之下。我只是删除了您的<div class="thumbnail clearfix">分词以留下以下内容：

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

您可以重新添加分组，但请确保关闭它们，否则ScrollSpy将无法正确跟踪它，并且会中断。

答案 2 :(得分：1)

如果你深入研究这个插件的代码，那么选择.nav的父代非常重要

this.selector = (this.options.target
      || ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
      || '') + ' .nav li > a'
相关问题
最新问题