title: How to make smoothest affix to bottom navbar?
body: <p>I'm trying to align what would be a fixed bottom navbar to affix top navbar. I first tried to use the offset option within a data attribute, then I chose to use a different format. I've tried adjusting the header size, but concerned about the image not breaking to point that seems appropriate within mobile view.</p>
  
  <p>Can't seem to make smoothest transition possible within 2 pixels. E.g. <a href="https://www.aspiration.com/" rel="nofollow">https://www.aspiration.com/</a></p>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>$(document).ready(function() {
      $('#nav').affix({
            offset: {
              top: $('header').offset().top
            }
      });
  });
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>header {
      height:630px;
  }
  
  #nav.affix {
      position: fixed;
      top: 0;
      width: 100%;
      z-index:10;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body id="home"&gt;
    &lt;header&gt;
      &lt;section&gt;
        &lt;img&gt;
      &lt;/section&gt;
    &lt;/header&gt;
  
    &lt;!-- Begin Navbar --&gt;
    &lt;div id="nav"&gt;
      &lt;div class="navbar navbar-default navbar-static"&gt;
        &lt;div class="container"&gt;
          &lt;!-- .btn-navbar is used as the toggle for collapsed navbar content --&gt;
          &lt;a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
            &lt;span class="glyphicon glyphicon-bar"&gt;&lt;/span&gt;
            &lt;span class="glyphicon glyphicon-bar"&gt;&lt;/span&gt;
            &lt;span class="glyphicon glyphicon-bar"&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;div class="navbar-collapse collapse"&gt;
            &lt;ul class="nav navbar-nav"&gt;
              &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="divider"&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
            &lt;ul class="nav pull-right navbar-nav"&gt;
              &lt;li&gt;
                &lt;form class="navbar-form"&gt;
                  &lt;input type="text" class="form-control" placeholder="Search"&gt;
                  &lt;button type="submit" class="btn btn-default"&gt;&lt;i class="glyphicon glyphicon-search"&gt;&lt;/i&gt;
                  &lt;/button&gt;
                &lt;/form&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a href="#"&gt;&lt;i class="glyphicon glyphicon-flag"&gt;&lt;/i&gt; &lt;span class="badge"&gt;2&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- /.navbar --&gt;
    &lt;/div&gt;
  
    &lt;section&gt;
      BELOW the navbar
      &lt;img&gt;
    &lt;/section&gt;
  </code></pre>