twitter-bootstrap Twitter Bootstrap Scrollspy 根本不工作

Question

提问by Richlewis

I have asked a previous question regarding Bootstrap ScrollSpy and this is my final attempt at trying to get this to work.

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

What I am trying to achieve is to change the colour of the navbar a tag when scrolling in that section. I have tried many ways and even have a Jsfiddleworking but even that setup in my app does not work

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

This is what I have

这就是我所拥有的

JS

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

Body

身体

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

View

看法

<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;
 }

i know that height 100% may cause an issue but the height of my scroller will depend on the content and it can change.

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

I am now pulling my hair out, i have read that this scrollspy is quite buggy but surely it must work as the demo on their site does

我现在正在拔头发，我读过这个滚动间谍有很多问题，但肯定它必须像他们网站上的演示一样工作

EDIT

编辑

$('#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>

This turns all the links red so they are now all active?

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

also my body is 100% for sticky footer, not sure if that makes a difference Help really appreciated

我的身体也是 100% 的粘性页脚，不确定这是否有所不同帮助真的很感激

Answer 1

回答by amarcy

You need to move the data-spy and data-target attributes from the body:

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

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

and move them to the div "spyOnThis":

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

<div id="spyOnThis">

Should be:

应该：

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

Per the documentation:

根据文档：

"To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body) and data-target=".navbar" to select which nav to use. You'll want to use scrollspy with a .nav component."

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

Based on your HTML you also need to fix a couple things:

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

Your list tags are not closed:

您的列表标签未关闭：

<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>

Should be:

应该：

<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>

Your divs not properly closed either:

您的 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>

Should be (just showing a couple of them):

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

<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>

Also it seems that the 100% height causes it to only highlight the bottom-most entry in the navbar list.

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

Answer 2

回答by Graham Walters

Alright, firstly your nav links should individually be wrapped in litags i.e.

好的，首先你的导航链接应该单独包装在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>

Secondly your <div id="spyOnThis">div is missing a lot of closing div tags, so they're all nested instead of below each other. I simply removed your <div class="thumbnail clearfix">divides to leave the following:

其次，您的<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>

You can add the divides back in, but make sure you close them or the ScrollSpy won't be able to track it properly and will just break.

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

Answer 3

回答by John Magnolia

If you dive into the code for this plugin its actually very imporant that you select the parent to the .nav

如果您深入研究此插件的代码，实际上非常重要的是您选择 .nav 的父级

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

twitter-bootstrap Twitter Bootstrap Scrollspy 根本不工作

提问by Richlewis

回答by amarcy

回答by Graham Walters

回答by John Magnolia

相关推荐

最近更新

标签

twitter-bootstrap Twitter Bootstrap Scrollspy 根本不工作

提问by Richlewis

回答by amarcy

回答by Graham Walters

回答by John Magnolia

相关推荐

twitter-bootstrap Angular JS Bootstrap 手风琴示例

twitter-bootstrap Bootstrap 切换语言

twitter-bootstrap 使用 AngularJS 的动态菜单项

twitter-bootstrap 使用 X-editable for Bootstrap 将值发送到 post.php

相关推荐

最近更新

标签