好的,希望这是关于 Bootstrap Scrollspy 的最后一个问题,我希望还有一个问题需要解决。正如我所读到的,拥有 100% 的主体似乎不同意 scrollspy(我使用的是粘性页脚)。无论我在页面上的哪个位置,导航栏中的最后一个元素都会突出显示。
I have tried removing 100% body
I have tried removing the scrollspy js
I have tried setting the body as the target element
I have tried $('body').scrollspy();
这些都不起作用。如果我在我正在监视的元素上设置了高度,那么它确实有效,尽管它似乎滚动了相当多的目标元素然后改变了。我希望仍然能够保持粘性页脚。
这是我的代码
查看
<div class="container">
<div class="row show-grid clear-both">
<div id="left-sidebar" class="span3 sidebar">
<div class="side-nav sidebar-block">
<div id="dateNav">
<h3 class="resultTitle fontSize13">Release Dates</h2>
<ul class="nav 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>
<div class="span9">
<div id="spyOnThis" data-spy="scroll" data-target="#dateNav">
<% @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">
<!--Image here
<% end %>>
<div class="caption pull-right">
<!--Content Here
</div>
</div>
<% end %>
<% end %>
</div>
</div><!--span9-->
</div><!--Row-->
</div><!--/container-->
JS
$('#dateNav').scrollspy();
CSS
#dateNav{
position: fixed;
}
#spyOnThis {
height:100%;
overflow:auto;
}
.side-nav .active a {
color: #FFBE00;
}
HTML 输出(导航)
<div id="left-sidebar" class="span3 sidebar">
<div class="side-nav sidebar-block">
<div id="dateNav">
<h3 class="resultTitle fontSize13">Release Dates</h3>
<ul class="nav date">
<li><i class="icon-chevron-right"></i>
<a id="#d_#{date}" href="#d_2013-01-09">9th Jan 2013</a>
</li>
<li><i class="icon-chevron-right"></i>
<a id="#d_#{date}" href="#d_2013-01-11">11th Jan 2013</a>
</li>
<li class="active"><i class="icon-chevron-right"></i>
<a id="#d_#{date}" href="#d_2013-01-30">30th Jan 2013</a>
</li>
</ul>
</div>
</div>
</div>
被监视的元素
<div class="span9">
<div id="spyOnThis" data-target="#dateNav" data-spy="scroll">
<h3 id="d_2013-01-09" class="resultTitle fontSize13">Available on 9th Jan 2013</h3>
<div class="thumbnail clearfix">
<!--Image Here -->
<div class="caption pull-right">
<!--Paragraphs in here -->
</div>
</div>
<h3 id="d_2013-01-11" class="resultTitle fontSize13">Available on 11th Jan 2013</h3>
<div class="thumbnail clearfix">
<!--Image Here -->
<div class="caption pull-right">
<!-Paragraphs here
</div>
</div>
<div class="thumbnail clearfix">
<!-- Image Here-->
<div class="caption pull-right">
<!-paragraphs here -->
</div>
</div>
<div class="thumbnail clearfix">
<!-- Image Here-->
<div class="caption pull-right">
<!-paragraphs here -->
</div>
</div>
<h3 id="d_2013-01-09" class="resultTitle fontSize13">Available on next date</h3>
<div class="thumbnail clearfix">
<!--Image Here -->
<div class="caption pull-right">
<!--Paragraphs in here -->
</div>
</div>
</div>
</div>
对代码量表示歉意,但我想最好有更多的代码
所以有没有人知道这个的解决方案,因为 scrollspy 目前看起来确实有问题
谢谢
最佳答案
您根本无法在使用 ScrollSpy 监视的元素上设置 100% 高度,无论它是 body
还是另一个 div
。
但是,有一个 issue on GitHub这提出了一个解决方法(也讨论了 here )。
在您的情况下,这将是:
$(window).scrollspy({wrap: $('#spyOnThis')[0]});
Here's a jsFiddle of your code适用于该修复程序。请注意,我更改了您的一些 HTML:
- 我再次删除了
data-target
和data-spy
属性。启动 ScrollSpy 时,使用数据属性或 JavaScript。 - 我为您的
span9
div 添加了#spyOnThis
ID,因为不需要额外的标记。
希望这会一劳永逸地解决它。
编辑
这个解决方案有效;对于@Richlewis 的特定场景,我们需要将参数 offset: -250
添加到 ScrollSpy。
关于ruby-on-rails - Bootstrap Scrollspy 最终元素突出显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14528131/