从中心动画固定导航

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 demo - what I got so far。

Answer 1

由于某种原因，转换始终跳到左侧而不是从中心扩展。

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

只需指定0两个明确的，它应该工作：

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

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