title: Bootstrap Scrollspy final element highlighted
body: <p>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.</p>
  
  <pre><code>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();
  </code></pre>
  
  <p>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.</p>
  
  <p>Here is my code</p>
  
  <p>View</p>
  
  <pre><code>&lt;div class="container"&gt;
   &lt;div class="row show-grid clear-both"&gt;
    &lt;div id="left-sidebar" class="span3 sidebar"&gt;
      &lt;div class="side-nav sidebar-block"&gt;
       &lt;div id="dateNav"&gt;
        &lt;h3 class="resultTitle fontSize13"&gt;Release Dates&lt;/h2&gt;
         &lt;ul class="nav date"&gt;
          &lt;% @response.each_pair do |date, movie| %&gt;
          &lt;li&gt;&lt;i class="icon-chevron-right"&gt;&lt;/i&gt;&lt;%= link_to date_format(date), "#d_#{date}", :id=&gt; '#d_#{date}' %&gt;&lt;/li&gt;
          &lt;% end %&gt;
        &lt;/ul&gt;
       &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;div class="span9"&gt;
    &lt;div id="spyOnThis" data-spy="scroll" data-target="#dateNav"&gt;
     &lt;% @response.each_pair do |date, movie| %&gt;
      &lt;h3 class="resultTitle fontSize13" id="d_&lt;%= date %&gt;"&gt;Available on&amp;nbsp;&lt;%= date_format(date) %&gt;&lt;/h3&gt;
      &lt;% movie.each do |m| %&gt;
        &lt;div class="thumbnail clearfix"&gt;
          &lt;!--Image here
      &lt;% end %&gt;&gt;
          &lt;div class="caption pull-right"&gt;
            &lt;!--Content Here
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;% end %&gt;
    &lt;% end %&gt;
    &lt;/div&gt;
  &lt;/div&gt;&lt;!--span9--&gt;
  &lt;/div&gt;&lt;!--Row--&gt;
  &lt;/div&gt;&lt;!--/container--&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$('#dateNav').scrollspy();
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#dateNav{
  position: fixed;
  }
  
  #spyOnThis {
  height:100%;
  overflow:auto;
  }
  
  .side-nav .active a {
   color: #FFBE00;
  }
  </code></pre>
  
  <p>HTML Output (Nav)</p>
  
  <pre><code>  &lt;div id="left-sidebar" class="span3 sidebar"&gt;
     &lt;div class="side-nav sidebar-block"&gt;
      &lt;div id="dateNav"&gt;
       &lt;h3 class="resultTitle fontSize13"&gt;Release Dates&lt;/h3&gt;
       &lt;ul class="nav date"&gt;
      &lt;li&gt;&lt;i class="icon-chevron-right"&gt;&lt;/i&gt;
      &lt;a id="#d_#{date}" href="#d_2013-01-09"&gt;9th Jan 2013&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;i class="icon-chevron-right"&gt;&lt;/i&gt;
      &lt;a id="#d_#{date}" href="#d_2013-01-11"&gt;11th Jan 2013&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="active"&gt;&lt;i class="icon-chevron-right"&gt;&lt;/i&gt;
    &lt;a id="#d_#{date}" href="#d_2013-01-30"&gt;30th Jan 2013&lt;/a&gt;
    &lt;/li&gt;
    &lt;/ul&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Element being spied on</p>
  
  <pre><code>&lt;div class="span9"&gt;
   &lt;div id="spyOnThis" data-target="#dateNav" data-spy="scroll"&gt;
  
    &lt;h3 id="d_2013-01-09" class="resultTitle fontSize13"&gt;Available on 9th Jan 2013&lt;/h3&gt;
     &lt;div class="thumbnail clearfix"&gt;
      &lt;!--Image Here --&gt;
      &lt;div class="caption pull-right"&gt;
       &lt;!--Paragraphs in here --&gt;
      &lt;/div&gt;
     &lt;/div&gt;
  
      &lt;h3 id="d_2013-01-11" class="resultTitle fontSize13"&gt;Available on 11th Jan 2013&lt;/h3&gt;
       &lt;div class="thumbnail clearfix"&gt;
      &lt;!--Image Here --&gt;
       &lt;div class="caption pull-right"&gt;
      &lt;!-Paragraphs here
       &lt;/div&gt;
      &lt;/div&gt;
  
       &lt;div class="thumbnail clearfix"&gt;
        &lt;!-- Image Here--&gt;
        &lt;div class="caption pull-right"&gt;
         &lt;!-paragraphs here --&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
       &lt;div class="thumbnail clearfix"&gt;
        &lt;!-- Image Here--&gt;
        &lt;div class="caption pull-right"&gt;
         &lt;!-paragraphs here --&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
       &lt;h3 id="d_2013-01-09" class="resultTitle fontSize13"&gt;Available on next date&lt;/h3&gt;
     &lt;div class="thumbnail clearfix"&gt;
      &lt;!--Image Here --&gt;
      &lt;div class="caption pull-right"&gt;
       &lt;!--Paragraphs in here --&gt;
      &lt;/div&gt;
     &lt;/div&gt;
     &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>Apologies for the amount of code but better to have more on there i guess</p>
  
  <p>So does anyone know of a solution for this as scrollspy does seem quite buggy at the moment</p>
  
  <p>Thanks</p>