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&nbsp;<%= 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' %>
Edit
Report