title: CSS3 Transition from fixed to absolute
body: <h2>Fixed on scroll</h2>
  
  <p>I created a logo element which is absolutely positioned in the document and, when I scroll over it stick on the top of the window with a fixed position (an example here : <a href="https://jsfiddle.net/swzbe9cv/2" rel="noreferrer">https://jsfiddle.net/swzbe9cv/2</a>)</p>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>  window.addEventListener('scroll', fixLogo);
    function fixLogo(){
      if(window.scrollY &gt;= trigger){
        if(!logo.classList.contains('fixed')){
          logo.classList.add('fixed');
        }
      } else{
        if(logo.classList.contains('fixed') &amp;&amp; !nav.classList.contains('show')){
          logo.classList.remove('fixed');
        }
      }
    }
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.logo {
    position: absolute;
    top: calc(100% + 15px);
    height: 40px;
    width: 100px;
  }
  
  .fixed {
    position: fixed;
    top: 15px;
  }
  </code></pre>
  
  <h2>With a menu appearing</h2>
  
  <p>I then decided to add a menu on the left which is showed/hided by a click on the logo element. This menu got a fixed position and the logo as to be on top of it when it is showed. (example here: <a href="https://jsfiddle.net/6cskthuz/2/" rel="noreferrer">https://jsfiddle.net/6cskthuz/2/</a>)
  <strong>JavaScript</strong></p>
  
  <pre><code>  logo.addEventListener('click',showMenu);
    function showMenu(){
      if(nav.classList.contains('show')){
        if(window.scrollY &lt; pageheight &amp;&amp; logo.classList.contains('fixed')){
          logo.classList.remove('fixed');
        }
        nav.classList.remove('show');
      } else {
        if(!logo.classList.contains('fixed')){
          logo.classList.add('fixed');
        }
        nav.classList.add('show');
      }
    }
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>nav {
    z-index:1;
    position: fixed;
    top: 0px;
    left: -8vw;
    width: 8vw;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    transition: 1s;
    padding-top: 8vw;
    text-align: center;
    font-size: 2rem;
  }
  .show {
    left: 0px;
  }
  </code></pre>
  
  <p>How could I make a <strong>smooth translation</strong> of the logo element on top of menu when the menu appear and the logo is in <strong>absolute position</strong>?</p>
  
  <p>I would like to do it <em>CSS only</em> at best, <em>without jQuery</em> at least.</p>
  
  <p>PS: I found two related  questions:
  1. <a href="https://stackoverflow.com/questions/8919622/css3-transition-from-normal-flow-position-to-absolute">this one</a> about relative to fixed/absolute positioning
  2. And <a href="https://stackoverflow.com/questions/14909870/css-transitions-switching-between-fixed-and-absolute-positioning">this one</a> which appears to be unresolved but similar</p>