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:900px;">&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;  
margin-top: 10px;
}



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

#just-for-testing{
  background-image: url("https://timeglobalspin.files.wordpress.com/2012/12/int-soil-1213.jpg?w=480&h=320&crop=1");  
  
}

JavaScript

$(function () {
  document.getElementById('navig').style.visibility = 'hidden';
  var fixed = false;
  var topTrigger = $('#navig').offset().top;

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

  });
  $(document).scroll(function() {
    if( $(this).scrollTop() >= topTrigger ) {
      if( !fixed ) {
        fixed = true;
        $('#navig').css({'position':'fixed', 'top':'0'});
      }
    } else {
      if( fixed ) {
        fixed = false;
        $('#navig').css({'position':'absolute'});
      }
    }
  });
});