從中心動畫固定導航

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/