JSFiddle - React, Tailwind, and code Playground

HTML

<body>

   
   <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>
    
    </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(../images/chateau-default7.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;
}

JavaScript

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

    else 
           document.getElementById('arr_downpoint').style.visibility = 'visible';
        });