{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 冷血范 的问题《Twitter Bootstrap Scrollspy not working at all》','https://www.manongdao.com/q-1236272.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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
Alright, firstly your nav links should individually be wrapped in
litags i.e.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: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.
If you dive into the code for this plugin its actually very imporant that you select the parent to the .nav
You need to move the data-spy and data-target attributes from the body:
and move them to the div "spyOnThis":
Should be:
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:
Should be:
Your divs not properly closed either:
Should be (just showing a couple of them):
Also it seems that the 100% height causes it to only highlight the bottom-most entry in the navbar list.