JSFiddle - React, Tailwind, and code Playground

HTML

<header class="header"></header>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /><br />
<br />
<br />
<br />
<div class="box">
    <p class="message">Hello</p>
</div>
<br />
<br />
<br />
<br /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /><br />
<br />
<br />
<br /><br />
<br />
<br />
<br /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /><br />
<br />
<br />
<br />

<p class="halfway"></p>

CSS

* {
    padding: 0;
    margin: 0;
}

html, 
body {
    height: 100%;    
}

body {
    position: relative;
}

.header {
    width: 100%;
    height: 20px;
    position: fixed;
    top: 0;
    left: 0;    
    background: black;
}

.box {
    width: 200px;
    height: 200px;
    background: red;
}

.message {
    text-align: center;
    width: 100%;
    display: none;
}

.box.is-active .message {
    display: block;
}

.halfway {
    width: 100%;
    height: 1px;
    background: black;
    position: fixed;
    top: 20px; right: 0; bottom: 0; left: 0;
    margin: auto;
}

JavaScript

var windowHeight = $(window).height(),
    headerHeight = $('.header').height(),
    boxHeight = $('.box').height(),
    elementOffset = $('.box').offset().top,
    verticalMatch = (windowHeight / 2) + (headerHeight / 2) - (boxHeight / 2);

    
$(window).on('scroll', function () {
    var scrollTop = $(window).scrollTop(),
        distance = elementOffset - scrollTop;
    
    if( distance <= verticalMatch ) {
       $('.box').addClass('is-active');
    }       
    
});


$(window).on('resize', function() {
   //update windowHeight
   //update elementOffset
});