JSFiddle - React, Tailwind, and code Playground

HTML

<body>

   
   <header id="header">
			<img class="logo" src="https://s-media-cache-ak0.pinimg.com/736x/6d/0e/76/6d0e7618ba4057878052e1e0e20f3a96.jpg" 
			srcset="https://s-media-cache-ak0.pinimg.com/736x/6d/0e/76/6d0e7618ba4057878052e1e0e20f3a96.jpg 1380w,
             https://s-media-cache-ak0.pinimg.com/736x/6d/0e/76/6d0e7618ba4057878052e1e0e20f3a96.jpg 800w,	
             https://s-media-cache-ak0.pinimg.com/736x/6d/0e/76/6d0e7618ba4057878052e1e0e20f3a96.jpg 600w"			
			/>
		
<a id="arr_downpoint" href="#">
		<img id ="arr_down" src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-512.png" 
		srcset="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-512.png 1380w,
				 https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-512.png 640w,	
				 https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-512.png 320w"		
		/>
    </a>
    
    <nav id="navig">
        <ul class="menu">
        <li>
          <a href="#">Events</a>
        </li>
        <li>
          <a href="#">News</a>
        </li>
        <li>
          <a href="#">Weather</a>
        </li>
        <li>
          <a href="#">Blog</a>
        </li>
      </ul>
  </nav>

      
    
    
    </header>
    <div id="just-for-testing" style="height:500px;">&nbsp;</div>
     
   </body>

CSS

header {
  flex:1;
  height: 100vh;
  width: 100%;
  padding: 0;
  margin: 0;

  overflow: hidden;
  font-size: 100%;
  position: relative;

  background-image: url("http://themaisonette.net/wp-content/uploads/2012/09/Blue-tiles-swimming-pool-water-reflection-texture-image-royalty-free.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;   
  }

#arr_down{	
	position: absolute;	
left: 30.01%; bottom: -13%;
  margin: 0 auto;  
  animation: blinker 3s linear infinite;	margin-top: 10px;
}

@keyframes blinker{  
  50% { opacity: 0.0; }
}


.logo {
position: absolute;	 
top: 14%; left: 0; right: 0; 
  margin: auto;
}  
nav {
			z-index: 9999; 
      position: fixed; left: 0; top: 0 !important; width: 100%;
    font-size: 20px;
    text-align: center;
    text-transform: uppercase;
    background:green;
}
nav ul {
    margin:0;
    padding: 0;
    list-style-type: none;
}
nav ul li {
    display: inline-block;
    padding: 0 10px 0 10px;
}
nav ul li a {
    text-decoration: none;
    color: #fff;
}

JavaScript

document.getElementById('navig').style.visibility = 'hidden';
   
   $(window).scroll(function () {
        if ($(this).scrollTop() > 10) 
            document.getElementById('arr_downpoint').style.visibility = 'hidden';

    else 
           document.getElementById('arr_downpoint').style.visibility = 'visible';
           
       if ($(this).scrollTop() > 220) {
           document.getElementById('header').style.visibility = 'hidden';
            document.getElementById('navig').style.visibility = 'visible';
           }
     else   {
            document.getElementById('header').style.visibility = 'visible';
            document.getElementById('navig').style.visibility = 'hidden';
 	       } 	
        
});