title: Animate fixed nav from center
body: <p>I am trying to add an expanding animation to the navbar when it becomes sticky (when the user reaches the waypoint).  </p>
  
  <p>For some reason, the transition always jumps to the left side at the beginning instead of expanding from the center.  </p>
  
  <p>How can I make it "grow" from where it is?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;header class="header"&gt;
    &lt;div class="bg"&gt;&lt;/div&gt;
  
    &lt;div id="waypoint"&gt;&lt;/div&gt;
  
    &lt;nav class="nav" id="nav"&gt;
      &lt;div class="wrapper"&gt;
        &lt;div class="container"&gt;
          &lt;ul&gt;
            &lt;li&gt;txt&lt;/li&gt;
            &lt;li&gt;txt&lt;/li&gt;
            &lt;li&gt;txt&lt;/li&gt;
            &lt;li&gt;txt&lt;/li&gt;
            &lt;li&gt;txt&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.wrapper {
    width: 600px;
    background: rgba(255, 255, 255, 0.5);
    margin: 0 auto;
  }
  
  .container {
    max-width: 600px;
    margin: 0 auto;
  }
  
  .nav {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  
  .nav.sticky .wrapper {
    position: fixed;
    top: 0;
    width: 100%;
    bottom: auto;
    background: #d0d0d0;
    box-shadow: 0 5px 3px rgba(0, 0, 0, 0.3);
    transition: 1s all ease;
  }
  </code></pre>
  
  <p>The <strong>Javascript</strong> just adds the <code>sticky</code> class when the user gets to the waypoint.  </p>
  
  <p><a href="https://jsfiddle.net/1htqqfvb/" rel="nofollow">JSFiddle demo - what I got so far</a>.</p>