动画固定导航从中心

Question

当导航条变得粘稠时(当用户到达路径点时)，我尝试将扩展动画添加到导航栏中。

由于某些原因，过渡总是在开始时跳到左边，而不是从中间扩展。

我怎样才能使它从它所在的地方“成长”呢？

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演示-到目前为止我得到了什么。

Answer 1

由于某些原因，过渡总是在开始时跳到左边，而不是从中间扩展。

这是因为left和right的默认值是auto，因此，当切换到固定位置时，计算出的“初始”左值变成了以前的左元素边值。

只需显式地为这两种情况指定0，它应该可以工作：

.nav.sticky .wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  /* … */
}

https://jsfiddle.net/1htqqfvb/3/