从中心动画固定导航

Question

我试图在导航栏变粘时（当用户到达航点时）向导航栏添加扩展动画。

出于某种原因，过渡总是跳到开头的左侧而不是从中心扩展。

我怎样才能做到＆＃34;成长＆＃34;从哪里来？

HTML：

<header class="header">
  <div class="bg"></div>

  <div id="waypoint"></div>

  <nav class="nav" id="nav">
    <div class="wrapper">
      <div class="container">
        <ul>
          <li>txt</li>
          <li>txt</li>
          <li>txt</li>
          <li>txt</li>
          <li>txt</li>
        </ul>
      </div>
    </div>
  </nav>
</header>

CSS：

.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;
}

Javascript 只会在用户到达航点时添加sticky类。

JSFiddle demo - what I got so far