Logo and Menu SlideIn and SlideOut

by davidxmartins

HTML

<div class="wrapper">
<div class="header"></div>

<div id="logo"><h2>LOGO</h2></div>
<div id="menu"><h2>MENU</h2></div>

</div>

CSS

body {
   margin: 0;
   font-family: sans-serif;
 }

 .wrapper {
   height: 3000px;
 }

 .header {
   background: grey;
   height: 100px;
 }

#logo {
   position: fixed;
   top: 30px;
   left: -100px;
   /* Initial position outside the left side of the viewport */
   opacity: 0;
   /* Initially invisible */
   transition: opacity 2s, left 1s;
   /* Smooth transition animation */
 }

#menu {
   position: fixed;
   top: 30px;
   right: -100px;
   /* Initial position outside the right side of the viewport */
   opacity: 0;
   /* Initially invisible */
   transition: opacity 2s, right 1s;
   /* Smooth transition animation */

 }

JavaScript

window.addEventListener("scroll", function() {
  var logo = document.getElementById("logo");
  var menu = document.getElementById("menu");

  if (window.scrollY > 800) {
    /* DISTANCE FROM THE TOP */
    logo.style.opacity = "1"; /* Fade in */
    logo.style.left = "20px"; /* Move element 1 from left */
    menu.style.opacity = "1"; /* Fade in */
    menu.style.right = "20px"; /* Move element 2 from right */
  } else {
    logo.style.opacity = "0"; /* Fade out */
    logo.style.left = "-100px"; /* Move element 1 outside the left side */
    menu.style.opacity = "0"; /* Fade out */
    menu.style.right = "-100px"; /* Move element 2 outside the right side */
  }
});