title: Bootstrap scrollspy offset on a fixed navbar does not work
body: <p>I have created and exact fiddle of my problem here for testing: <a href="http://jsfiddle.net/aVBUy/7/">http://jsfiddle.net/aVBUy/7/</a></p>
  
  <p>The issue is, when I click on navbar items, I have a script which scrolls to the element id. And I am using scrollspy to highlight the nav elements when page is in correct position. However the scrollspy is only changing the active state when it hits the top of the browser/device. Because my navbar is fixed I need an offset applied to scrollspy to offset by 51px (navbar height).</p>
  
  <p>I've tried everything and I can't get it to work. Please check my fiddle and see if you can find the where I'm going wrong, would help me so much.</p>
  
  <p>Here's my minimised code...</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
      &lt;div class="navbar-inner"&gt;
          &lt;div class="container"&gt;
              &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/a&gt;
              &lt;a class="brand" href="#"&gt;&lt;img src="img/logo.gif" alt="" /&gt;&lt;/a&gt;
              &lt;div class="nav-collapse collapse"&gt;
                  &lt;ul class="nav"&gt;
                      &lt;li&gt;&lt;a href="#welcome" data-scroll="#welcome"&gt;Welcome&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#about" data-scroll="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#route" data-scroll="#route"&gt;The Route&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#bike" data-scroll="#bike"&gt;The Bike&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
      &lt;div id="welcome" class="row-fluid"&gt;
          &lt;div class="span12"&gt;
              &lt;h3&gt;Welcome&lt;/h3&gt;
              ...
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;hr /&gt;
      &lt;div id="about" class="row-fluid"&gt;
          &lt;div class="span12"&gt;
              &lt;h3&gt;About the ride&lt;/h3&gt;
              ...
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;hr /&gt;
      &lt;div id="route" class="row-fluid"&gt;
          &lt;div class="span12"&gt;
              &lt;h3&gt;The Route&lt;/h3&gt;
              ...
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;hr /&gt;
      &lt;div id="bike" class="row-fluid"&gt;
          &lt;div class="span12"&gt;
              &lt;h3&gt;The Bike&lt;/h3&gt;
              ...
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;hr&gt;
      &lt;footer&gt;
          &lt;p class="muted"&gt;&lt;small&gt;© 2013 All rights reserved.&lt;/small&gt;&lt;/p&gt;
      &lt;/footer&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body {
      padding: 51px 0 0;
  }
  /* Override Bootstrap Responsive CSS fixed navbar */
   @media (max-width: 979px) {
      .navbar-fixed-top, .navbar-fixed-bottom {
          position: fixed;
          margin-left: 0px;
          margin-right: 0px;
      }
  }
  body &gt; .container {
      padding: 0 15px;
  }
  </code></pre>
  
  <p><strong>SCRIPT</strong></p>
  
  <pre><code>var offsetHeight = 51;
  
  $('.nav-collapse').scrollspy({
      offset: offsetHeight
  });
  
  $('.navbar li a').click(function (event) {
      var scrollPos = $('body &gt; .container').find($(this).attr('href')).offset().top - offsetHeight;
      $('body,html').animate({
          scrollTop: scrollPos
      }, 500, function () {
          $(".btn-navbar").click();
      });
      return false;
  });
  </code></pre>
  
  <p><strong>FIDDLE</strong></p>
  
  <p><a href="http://jsfiddle.net/aVBUy/7/">http://jsfiddle.net/aVBUy/7/</a></p>