Animate fixed nav from center - html

Question

I am trying to add an expanding animation to the navbar when it becomes sticky (when the user reaches the waypoint).
For some reason, the transition always jumps to the left side at the beginning instead of expanding from the center.
How can I make it "grow" from where it is?
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;
}
The Javascript just adds the sticky class when the user gets to the waypoint.
JSFiddle demo - what I got so far.

Answer 1

For some reason, the transition always jumps to the left side at the beginning instead of expanding from the center.
That’s because the default value for left and right is auto, and therefor the “initial” calculated left value when you switch to fixed position becomes the one the left element edge had before.
Simply specify 0 for both explicitly, and it should work:
.nav.sticky .wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
/* … */
}
https://jsfiddle.net/1htqqfvb/3/