title: bootstrap scrollspy highlights last navigation link button after loading
body: <p>I've built a navigation bar at the top with 5 links.
  At the page itself I have added 5 sections with id's according to the name after the # tag in the  element.
  The problem is that the last navigation link button is highlighted ('active' class was added to it on runtime in the beginning although in the code itself the first navbar item is set to "active".
  I have the latest bootstrap version which is v2.0.4
  What is wrong ?</p>
  
  <pre><code>&lt;div class="navbar" id="MenuBar"&gt;
      &lt;div class="topHeadContentLogo"&gt;&lt;/div&gt;
      &lt;ul class="nav nav-pills" id="MenuUl"&gt;
          &lt;li class="active"&gt;&lt;a href="#Weekly"&gt;Weekly&lt;/a&gt;&lt;/li&gt;
          &lt;li class=""&gt;&lt;a href="#Post"&gt;Post&lt;/a&gt;&lt;/li&gt;
          &lt;li class=""&gt;&lt;a href="#Audience"&gt;Audience&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#Website"&gt;Website&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#FAQ"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div id="contentDiv"&gt;
      &lt;section id="Weekly"&gt;
          &lt;h1&gt;weekly&lt;/h1&gt;
      &lt;/section&gt;
  
      &lt;section id="Post"&gt;
          &lt;h1&gt;Post&lt;/h1&gt;
      &lt;/section&gt;
  
      &lt;section id="Audience"&gt;
          &lt;h1&gt;Audience&lt;/h1&gt;
      &lt;/section&gt;
  
      &lt;section id="Website"&gt;
          &lt;h1&gt;Website&lt;/h1&gt;
      &lt;/section&gt;
  
      &lt;section id="FAQ"&gt;
          &lt;h1&gt;FAQ&lt;/h1&gt;
      &lt;/section&gt;
  &lt;/div&gt;
  
  
  
  $('#MenuBar').scrollspy(); after document ready
  </code></pre>