Animiertes Navigationsgerät vom Zentrum aus animieren

Question

Ich versuche, der Navigationsleiste eine expandierende Animation hinzuzufügen, wenn sie sticky wird (wenn der Benutzer den Wegpunkt erreicht).

Aus irgendeinem Grund springt der Übergang am Anfang immer auf die linke Seite, anstatt von der Mitte aus zu expandieren.

Wie kann ich es "wachsen lassen" von wo es ist?

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

Die Javascript nur fügt die sticky Klasse, wenn der Benutzer auf den Wegpunkt wird.

JSFiddle demo - what I got so far.

Answer 1

Aus irgendeinem Grund springt der Übergang am Anfang immer auf die linke Seite, anstatt von der Mitte aus zu expandieren.

Das ist, weil der Standardwert für left und rightauto ist, und dafür die „initial“ linken Wert berechnet, wenn Sie zu fester Position wechseln wird denjenigen die linke Element Kante zuvor.

einfach 0 sowohl explizit angeben, und es sollte funktionieren:

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

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