fixed to absolute

and invert

HTML

Click on the ball !
<div class="logo">
</div>
<nav>
  Menu
</nav>
<div class="infos">
If I click on the ball while scrollY is up there I would like a smooth translation transition
</div>

CSS

body {
  height: 200vh;
}
.logo {
  
  position: absolute;
  top: calc(20% + 15px);
  
  height: 4vw;
  width: 4vw;
  color: white;
  background-color: black;
  border-radius: 100%;
  cursor: pointer;
}
.fixed {
  z-index:2;
  position: fixed;
  top: 15px;
}
nav {
  z-index:1;
  position: fixed;
  top: 0px;
  left: -8vw;
  width: 8vw;
  height: 100%;
  border: solid 1px black;
  transition: 1s;
  padding-top: 8vw;
  text-align: center;
  font-size: 2rem;
}
.show {
  left: 0px;
}
.infos {
  position: absolute;
  top: calc(20% + 15px);
  width: 80%;
  border-bottom: solid 1px black;
  text-align : center;
}

JavaScript

logo = document.getElementsByClassName('logo')[0],
  trigger = window.innerHeight*0.2,
  nav = document.getElementsByTagName('nav')[0];

// Logo
window.addEventListener('scroll', fixLogo);
function fixLogo(){
  if(window.scrollY >= trigger){
    if(!logo.classList.contains('fixed')){
      logo.classList.add('fixed');
    }
  } else{
    if(logo.classList.contains('fixed') && !nav.classList.contains('show')){
      logo.classList.remove('fixed');
    }
  }
}
logo.addEventListener('click',showMenu);
// Menu
function showMenu(){
  if(nav.classList.contains('show')){
    if(window.scrollY < trigger && 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');
  }
}