Ric*_*wis 10 scroll twitter-bootstrap
我之前提出过有关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 <%= 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%的粘性页脚,不确定是否有所作为帮助真的很感激
ama*_*rcy 11
您需要从正文中移动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">
根据文件:
"要轻松地将scrolllspy行为添加到顶部栏导航,只需将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%高度使其仅突出显示导航栏列表中最底部的条目.
| 归档时间： |
|
| 查看次数： |
28263 次 |
| 最近记录： |