title: CSS transition from fixed to absolute with change in top not working
body: <p>I've a fixed top header bar on my blog. I want another header bar show on the top of the first header when user scrolls down a particular point.</p>
  
  <p>I'm achieving it with jQuery Waypoints. It's working fine.</p>
  
  <p>I've added transition so that when it appears it slides down. It works fine too.</p>
  
  <p>But the problem is when I scroll up, the transition doesn't happen.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div id="share-bar" class="sticky-wrapper"&gt;This is second header&lt;/div&gt;
  &lt;div id="header"&gt;This is normal header&lt;/div&gt;
  &lt;p id="trigger"&gt;THIS IS THE PLACE WHERE SECOND BAR COMES UP&lt;/p&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$('#trigger').waypoint(function(){
      $( "#share-bar" ).toggleClass("stuck");
  });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#header {
      height: 55px;
      background-color: black;
      color: white;
      position: fixed;
      top: 0;
      width: 100%;
  }
  #share-bar {
      background: none repeat scroll 0 0 #FFFFFF;
      border-bottom: 1px solid #DDDDDD;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
      float: left;
      height: 55px;
      padding: 0;
      width: 100%;
      transition: all 0.2s ease 0s;
  }
  .sticky-wrapper { position:absolute; top:-55px; }    
  .stuck {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 999;
      transition: all 0.2s ease 0s;
  } 
  </code></pre>
  
  <p>I've a <a href="http://jsfiddle.net/LittleLebowski/tqjSm/" rel="nofollow">working Fiddle here</a></p>
  
  <p>My question is:</p>
  
  <ol>
  <li>Why does the transition work from -55px absolute to 0 fixed but not vice versa?</li>
  </ol>
  
  <p>What am I doing wrong? Please guide me. I'm stuck.</p>