title: Bootstrap Scrollspy is highlighting the nav element just above the selected element
body: <p>I've implemented scrollspy on our soon to launch homepage at: <a href="http://dev.indee.tv/" rel="nofollow">http://dev.indee.tv/</a></p>
  
  <p>If you ignore the menu at the top and scroll a little further down, you'll see the familiar Bootstrap Navbar. The issue I'm having is that when you select a menu item, it goes to the correct ID, but it doesn't highlight the correct menu item it has landed on till I scroll down a few pixels.</p>
  
  <p>Here's the Nav bar code:</p>
  
  <pre><code>&lt;div class="nav navbar affix-top span12" data-spy="affix" data-offset-top="590"&gt;
      &lt;div class="navbar-inner"&gt;
         &lt;a class="brand" href="#"&gt;Indee&lt;/a&gt;
         &lt;ul class="nav"&gt;
            &lt;li&gt;&lt;a href="#whyindee" onclick=$.scrollTo(whyindee,1000);&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#howindee" onclick=$.scrollTo(howindee,1000);&gt;USING IT&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#tryit" onclick=$.scrollTo(tryit,1000);&gt;TRY IT&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#casestudy" onclick=$.scrollTo(casestudy,1000);&gt;EXAMPLES&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#featureset" onclick=$.scrollTo(featureset,1000);&gt;FEATURES&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
      &lt;/div&gt; &lt;!-- navbar-inner--&gt;
  &lt;/div&gt;&lt;!-- navbar --&gt;
  </code></pre>
  
  <p>Can you help me understand what I'm doing wrong?</p>
  
  <p>Thanks!</p>