title: jQuery Snap/Fixed Menu Width Changes and Jumps When Scrolled Past Certain Point
body: <p>I have a horizontal nav I'd lock fixed to the top of the page when the nav's top property is at the top of the page. However, when the nav reaches the top of the page, it increases its width and is jumpy. Once I've scrolled down a little further, this phenomenon stops. Note that this same thing happens when scrolling back up. In other words, as the top of the nav reaches the top of the page, the width-change-jumpiness thing occurs.</p>
  
  <p>Link to fiddle below. I tried to add the code as best I could, but SO is complaining about it.</p>
  
  <p><a href="http://jsfiddle.net/tc2ojqjw/2/" rel="nofollow">jsfiddle</a></p>
  
  <p>HTML
      
              </p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="phone-number"&gt;
      ...
      &lt;/div&gt;
      &lt;div id="phone-sub-text"&gt;
          ...
      &lt;/div&gt;
      &lt;div id="social-media"&gt;
          &lt;div&gt;
              &lt;img id="fb-icon" src="img/fb-rect.jpg"/&gt;
              &lt;img src="img/twitter-rect.jpg"/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;h1&gt;
      ...
      &lt;/h1&gt;
          &lt;div id="float-nav-bar"&gt;&lt;/div&gt;
          &lt;div id="main"&gt;
              &lt;header&gt;
                  ...
              &lt;/header&gt;
              &lt;header class="sub-header"&gt;
                  ...
              &lt;/header&gt;
              &lt;div id="main-content-top" class="main-content"&gt;
                  &lt;section&gt;
                      ...
                      &lt;br/&gt;
                      ...
                      &lt;br/&gt;
                      ...
                      &lt;br/&gt;
                      ...
                      &lt;br/&gt;
                      ...
                      &lt;br/&gt;
                      ...
                      &lt;br/&gt;
                      ...
                  &lt;/section&gt;
                  &lt;figure&gt;
                      &lt;img src="#" /&gt;
                  &lt;/figure&gt;
              &lt;/div&gt;
              &lt;header&gt;
                  ...
              &lt;/header&gt;
              &lt;header class="sub-header"&gt;
                  ...
              &lt;/header&gt;
              &lt;div id="main-content-bottom" class="main-content"&gt;
                  &lt;section&gt;
                      ...
                      &lt;br/&gt;
                      ...
                      &lt;br/&gt;
                      ...
                      &lt;br/&gt;
                      ...
                      &lt;br/&gt;
                      ...
                      &lt;br/&gt;
                      ...
                      &lt;br/&gt;
                      ...                    
                  &lt;/section&gt;
                  &lt;figure&gt;
                      &lt;img src="#"&gt;
                  &lt;/figure&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;footer class="container-footer"&gt;
  
          &lt;/footer&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>$(document).ready(function() {
  
      var topOfNav = $('#float-nav-bar').offset().top;
  
      $(window).scroll( function() {
          if ($(this).scrollTop() &gt; topOfNav){ 
  
              $('#float-nav-bar').addClass('fixed');
          }
          else 
          {
  
              $('#float-nav-bar').removeClass('fixed');
          }
      });
  });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#container {
      width: 75%;
      margin: auto;
  }
  
  h1, h2, h3{
      text-align: center;
      font-family: arial;
  }
  
  h1 {
      font-size: 36pt;
      margin: 0;
  }
  
  h1 a {
      color: inherit;
     text-decoration: none;
  }
  
  section {
      width: 60%;
      margin-top: 10px;
  }
  
  header {
      margin-top: 10px;
      font-size: 20pt;
      color: rgb(0, 64, 135);
  }
  
  .container-footer {
      height: 100px;
      background-color: rgb(0, 137, 96);
      margin-top: 40px;
  }
  
  .fixed {
      position: fixed;
      top: 0;
      width: inherit;
  }
  
  #float-nav-bar {
      height: 100px;
      background-color: #ccc;
  }
  </code></pre>