Bootstrap Scrollspy final element highlighted - ruby-on-rails

Question

Ok so hoping this is final question on Bootstrap Scrollspy, almost there, one more problem to fix i hope. As I have read having a body of 100% seems to disagree with scrollspy ( Im using sticky footer). The final element in my nav is highlighted no matter where i am on the page.
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();
None of these work. If i set the height though on the element I am spying on then it does work, though it seems to scroll past the target element quite a bit and then change. I would like to still be able to keep sticky footer.
Here is my code
View
<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 Output (Nav)
<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>
Element being spied on
<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>
Apologies for the amount of code but better to have more on there i guess
So does anyone know of a solution for this as scrollspy does seem quite buggy at the moment
Thanks

Answer 1

You simply can't set 100% height on the element you're spying on with ScrollSpy, whether it be body or another div.
However, there is an issue on GitHub that suggests a workaround for this (also discussed here).
In your case, this would be:
$(window).scrollspy({wrap: $('#spyOnThis')[0]});
Here's a jsFiddle of your code that works with that fix. Note that I changed some of your HTML:
I removed the data-target and data-spy attributes again. When initiating ScrollSpy, use either the data attributes or the JavaScript.
I gave your span9 div the #spyOnThis ID, since the extra markup was unnecessary.
Hopefully this will resolve it once and for all.
EDIT
This solution worked; for #Richlewis' specific scenario we needed to add the parameter offset: -250 to ScrollSpy.

Answer 2

I just got scrollspy working on a site that I'm building. I was having the same issue where the last element was always highlighted. My problem was that I was calling .scrollspy() on the nav element when it should be on the body.
Try changing your script call to:
$('body').scrollspy();

Answer 3

In case the other answers don't work for you, my problem ended up being a missing doctype on the top of the page.
Scrollspy calls $(window).height() in the formula to calculate the current scroll position. From this other question, you can see that this call will not work without a correct doctype.
As soon as I added <!DOCTYPE html> to the top of my HTML, Scrollspy started highlighting the correct links.