JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
</div>

CSS

.post {
    width: 250px;
    height: 1250px;
    background: blue;
    margin: 10px;}

.selected {
    background: green;
}

JavaScript

$(function(){
    $(window).bind('scroll', function() {
    console.log( $(window).height()/2 );
        $('.post').each(function() {
            var post = $(this);
            var position = post.position().top - $(window).scrollTop();
            
            if (position <= $(window).height()*0.2) {
                post.addClass('selected');
            } else {
                post.removeClass('selected');
            }
        });        
    });
});