title: Twitter Bootstrap Scrollspy not working at all
body: <p>I have asked a previous question regarding Bootstrap ScrollSpy and this is my final attempt at trying to get this to work.</p>
  
  <p>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 <a href="http://jsfiddle.net/richlewis14/NySg6/" rel="noreferrer">Jsfiddle</a> working but even that setup in my app does not work</p>
  
  <p>This is what I have</p>
  
  <p>JS</p>
  
  <pre><code>$('#spyOnThis').scrollspy();
  </code></pre>
  
  <p>Body</p>
  
  <pre><code>&lt;body data-spy="scroll" data-target="#spyOnThis"&gt;
  </code></pre>
  
  <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;h3 class="resultTitle fontSize13"&gt;Release Dates&lt;/h2&gt;
      &lt;ul class="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 class="span9"&gt;
    &lt;div id="dateNav"&gt;
      &lt;ul class="nav"&gt;
        &lt;li&gt;&lt;% @response.each_pair do |date, movie| %&gt;&lt;%= link_to date_format(date), "#d_#{date}" %&gt;&lt;% end %&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div id="spyOnThis"&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;img class="pull-left" src=&lt;% if m.image_link %&gt; &lt;%= m.image_link %&gt; &lt;% else %&gt; "/assets/noimage.jpg" &lt;% end %&gt;&gt;
          &lt;div class="caption pull-right"&gt;
            &lt;%= link_to m.name, m.title_id, :class =&gt; 'resultTitle fontSize11' %&gt;
            &lt;p class="bio"&gt;&lt;%= m.bio %&gt;&lt;/p&gt;
            &lt;p class="resultTitle"&gt;Cast&lt;/p&gt;
            &lt;p class="bio"&gt;&lt;%= m.cast.join(", ") unless m.cast.empty? %&gt;&lt;/p&gt;
            &lt;%= link_to "Remind me", reminders_path(:title_id =&gt; m.title_id), :method =&gt; :post, :class =&gt; 'links button' %&gt;
          &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>CSS</p>
  
  <pre><code>#dateNav{
  position: fixed;
  top: 0; left: 20px;
  width: 100%;
  background:none;
  text-align:center;
  }
  
  #spyOnThis {
   height:100%;
   overflow:auto;
  }
  
   .nav &gt; li &gt; a {
    display:block;
    }
  
  .nav &gt; li.active &gt; a {
   display:block;
   color: red;
   text-decoration: underline;
   }
  </code></pre>
  
  <p>i know that height 100% may cause an issue but the height of my scroller will depend on the content and it can change.</p>
  
  <p>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</p>
  
  <p>EDIT</p>
  
  <pre><code>$('#dateNav').scrollspy();
  
  &lt;body data-spy="scroll" data-target="#dateNav"&gt;
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>ul class="nav"&gt;
   &lt;li&gt;
   &lt;a href="#d_2013-01-09"&gt;9th Jan 2013&lt;/a&gt;
   &lt;a href="#d_2013-01-11"&gt;11th Jan 2013&lt;/a&gt;
   &lt;a href="#d_2013-01-18"&gt;18th Jan 2013&lt;/a&gt;
   &lt;a href="#d_2013-01-23"&gt;23rd Jan 2013&lt;/a&gt;
   &lt;a href="#d_2013-01-25"&gt;25th Jan 2013&lt;/a&gt;
   &lt;a href="#d_2013-01-30"&gt;30th Jan 2013&lt;/a&gt;
   &lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;div id="spyOnThis"&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;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;div class="thumbnail clearfix"&gt;
   &lt;div class="thumbnail clearfix"&gt;
   &lt;div class="thumbnail clearfix"&gt;
   &lt;h3 id="d_2013-01-18" class="resultTitle fontSize13"&gt;Available on 18th Jan 2013&lt;/h3&gt;
   &lt;div class="thumbnail clearfix"&gt;
   &lt;div class="thumbnail clearfix"&gt;
   &lt;h3 id="d_2013-01-23" class="resultTitle fontSize13"&gt;Available on 23rd Jan 2013&lt;/h3&gt;
   &lt;div class="thumbnail clearfix"&gt;
   &lt;h3 id="d_2013-01-25" class="resultTitle fontSize13"&gt;Available on 25th Jan 2013&lt;/h3&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>This turns all the links red so they are now all active?</p>
  
  <p>also my body is 100% for sticky footer, not sure if that makes a difference
  Help really appreciated</p>