Twitter Bootstrap Scrollspy не работает вообще
Я задал предыдущий вопрос относительно 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% может вызвать проблему, но высота моего скроллера будет зависеть от содержимого и может измениться.
Теперь я вытаскиваю свои волосы, я читал, что эта scrollspy довольно глючная, но, безусловно, она должна работать, поскольку демо на их сайте делает
ИЗМЕНИТЬ
$('#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% для липкого нижнего колонтитула, не уверен, что это имеет значение
Помощь действительно ценится
Ответы
Ответ 1
Вам нужно переместить атрибуты данных-шпиона и атрибутов данных из тела:
<body data-spy="scroll" data-target="#dateNav">
и переместите их в div "spyOnThis":
<div id="spyOnThis">
Должно быть:
<div id="spyOnThis" data-spy="scroll" data-target="#dateNav">
В документации :
"Чтобы легко добавить поведение scrollspy в вашу навигацию по topbar, просто добавьте data-spy =" scroll "в элемент, который вы хотите отслеживать (чаще всего это будет тело) и data-target =". navbar ", чтобы выберите, какой навигатор использовать. Вы хотите использовать scrollspy с компонентом .nav."
На основе вашего 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>
Ваши divs также не закрыты должным образом:
<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% заставляет отображать только самую нижнюю запись в списке навигационных панелей.
Ответ 2
Хорошо, во-первых, ваши навигационные ссылки должны быть индивидуально упакованы в теги li
i.e.
<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 не сможет правильно его отслеживать и просто сломается.
Ответ 3
Если вы погружаетесь в код для этого плагина, на самом деле очень важно, чтобы вы выбрали родителя для .nav
this.selector = (this.options.target
|| ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
|| '') + ' .nav li > a'