应该是:
根据文档:
"要轻松地将滚动监视行为添加到顶部导航栏,只需将 data-spy="scroll" 添加到您要监视的元素(通常是主体)和 data-target=".navbar" 到选择要使用的导航.您需要使用带有 .nav 组件的 scrollspy."
根据您的 HTML,您还需要修复一些问题:
您的列表标签未关闭:
<li><a href="#d_2013-01-09">2013 年 1 月 9 日</a><a href="#d_2013-01-11">2013 年 1 月 11 日</a><a href="#d_2013-01-18">2013 年 1 月 18 日</a><a href="#d_2013-01-23">2013 年 1 月 23 日</a><a href="#d_2013-01-25">2013 年 1 月 25 日</a><a href="#d_2013-01-30">2013 年 1 月 30 日</a>
应该是:
<li><a href="#d_2013-01-09">2013 年 1 月 9 日</a></li><li><a href="#d_2013-01-11">2013 年 1 月 11 日</a></li><li><a href="#d_2013-01-18">2013 年 1 月 18 日</a></li><li><a href="#d_2013-01-23">2013 年 1 月 23 日</a></li><li><a href="#d_2013-01-25">2013 年 1 月 25 日</a></li><li><a href="#d_2013-01-30">2013 年 1 月 30 日</a></li>
您的 div 也没有正确关闭:
<h3 id="d_2013-01-09" class="resultTitle fontSize13">2013 年 1 月 9 日可用</h3><div class="thumbnail clearfix"><h3 id="d_2013-01-11" class="resultTitle fontSize13">2013 年 1 月 11 日可用</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">2013 年 1 月 18 日可用</h3><div class="thumbnail clearfix"><div class="thumbnail clearfix"><h3 id="d_2013-01-23" class="resultTitle fontSize13">2013 年 1 月 23 日可用</h3><div class="thumbnail clearfix"><h3 id="d_2013-01-25" class="resultTitle fontSize13">2013 年 1 月 25 日可用</h3>
应该是(只展示其中的几个):
<h3 id="d_2013-01-23" class="resultTitle fontSize13">2013 年 1 月 23 日可用</h3>
<div class="thumbnail clearfix"><h3 id="d_2013-01-25" class="resultTitle fontSize13">2013 年 1 月 25 日可用</h3>
此外,似乎 100% 的高度使其仅突出显示导航栏列表中最底部的条目.
I have asked a previous question regarding Bootstrap ScrollSpy and this is my final attempt at trying to get this to work.
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 Jsfiddle working but even that setup in my app does not work
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 <%= 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.
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
解决方案
You need to move the data-spy and data-target attributes from the body:
<body data-spy="scroll" data-target="#dateNav">
and move them to the 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."
Based on your HTML you also need to fix a couple things:
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 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.
这篇关于Twitter Bootstrap Scrollspy 根本不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!