JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height:100%">
<div id="top_logo" class="top_logo"></div>
</div>

<div style="min-height:1000px"

CSS

.top_logo {
position: absolute;
width: 150px;
height: 132px;
left: 50%; 
top: 50%; 
margin-left: -75px; 
margin-top: -66px;
background-color:#c2151a; 
}

JavaScript

$(function() {
	toplogo_pos = $('#top_logo').offset().top; // определяем его первоначальное положение
	$(window).scroll(function(){

	   if ($(window).scrollTop() > toplogo_pos){ // Если страницу прокрутили дальше, чем находится наш блок
			$('#top_logo').css({'position': 'fixed', 'top':'0px', 'margin-top': '0px', 'z-index':'10'}); // То мы этот блок фиксируем и отображаем сверху.
	
	   }else{  // Если же позиция скрола меньше (выше), чем наш блок
			$('#top_logo').css({'position': 'absolute', 'left': '50%', 'top': '50%', 'margin-left': '-75px', 'margin-top': '-66px'}); // то возвращаем все назад
	   }
	})
});