title: Best method for implementing Bootstrap's affix-top function on nav bar
body: <p>I've been trying to get the affix-top function to work properly on my site I created using Bootstrap, but no matter what I set the offset as, it always prematurely jumps to the top of the page.  It should be noted, that when I view my page on a local view or in Firefox, everything acts as it should, with no violent jumps, but when I actually upload it to the server, and view it in anything but Firefox, that's when things get wonky.</p>
  
  <p>Here is the HTML for my navbar:</p>
  
  <pre><code>&lt;div id="nav-wrapper"&gt;
  &lt;div id="nav" class="navbar navbar-inverse affix-top" data-spy="affix" data-offset-top="875"&gt;
    &lt;div class="navbar-inner" data-spy="affix-top"&gt;
      &lt;div class="container"&gt;
  
        &lt;!-- .btn-navbar is used as the toggle for collapsed navbar content --&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;!-- Everything you want hidden at 940px or less, place within here --&gt;
        &lt;div class="nav-collapse collapse"&gt;
          &lt;ul class="nav"&gt;
              &lt;li&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#service-top"&gt;Services&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#contact-arrow"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;&lt;!--/.nav--&gt;
        &lt;/div&gt;&lt;!--/.nav-collapse collapse pull-right--&gt;
      &lt;/div&gt;&lt;!--/.container--&gt;
    &lt;/div&gt;&lt;!--/.navbar-inner--&gt;
  &lt;/div&gt;&lt;!--/#nav /.navbar navbar-inverse--&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here's my JS:</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function() {
          $('#nav-wrapper').height($("#nav").height());
          $('#nav').affix({
              offset: $('#nav').position()
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>And some of my CSS that relates:</p>
  
  <pre><code>#nav.affix {
      position: fixed;
      top: 0;
      width: 100%
  }
  #nav {
      position:relative;
  }
  </code></pre>
  
  <p>For what it's worth, <a href="https://stackoverflow.com/questions/14357576/bootstrap-menu-top-affix">here</a> is a similar post that I worked from first, but still couldn't get it to work for me.  <a href="http://homegrowndevelopment.com/" rel="nofollow noreferrer">Here</a> is my site as well so you can see how the navbar is jumping around.</p>
  
  <p>Thanks for any help.  I just can't seem to solve this issue!</p>