Logo and Menu fade in and slide out

by davidxmartins

HTML

<div class="wrapper">
    <div class="header"></div>
    <div id="logo" class="slide"><h2>LOGO</h2></div>
    <div id="menu" class="slide"><h2>MENU</h2></div>
</div>

CSS

body {
   margin: 0;
   font-family: sans-serif;
}
.wrapper {
   height: 2500px;
}
.header {
   background: grey;
   height: 100px;
}

#logo, 
#menu {
   position: fixed;
   top: 30px;
   transition: all 2s;
}
#logo {
   left: 20px;
   opacity: 0;
}
#menu {
   right: 20px;
   opacity: 0;
}

JavaScript

let logo = document.getElementById('logo');
let menu = document.getElementById('menu');
let isScrolled = false;

window.addEventListener("scroll", () => {
  if(window.scrollY > 800) {
    if(!isScrolled) {
      logo.style.opacity = '1';
      logo.style.left = '20px'; // reset to initial position for display
      logo.style.transition = 'opacity 2s'; // reset to transition only the opacity

      menu.style.opacity = '1';
      menu.style.right = '20px'; // reset to initial position for display
      menu.style.transition = 'opacity 2s'; // reset to transition only the opacity
      
      isScrolled = true;
    }  
  } else {
    if(isScrolled) {
      logo.style.opacity = '0';
      logo.style.left = '-100px'; // slide out
      logo.style.transition = 'opacity 2s, left 2s';

      menu.style.opacity = '0';
      menu.style.right = '-100px'; // slide out
      menu.style.transition = 'opacity 2s, right 2s';
      
      isScrolled = false;
    }
  }
});