JSFiddle - React, Tailwind, and code Playground

HTML

<div class="red"></div>
<div class="red"></div>
<div class="hide"></div>
<div class="red"></div>
<div class="hide-1"></div>

CSS

.red {height:400px;
background:red;margin-bottom:20px;}

.hide, .hide-1 {height:300px;background:blue;margin-bottom:20px;}

JavaScript

$(window).scroll(function(){

    $('.hide').each(function(){
var h = $(window).scrollTop();
     
    var o = $(this).offset().top;
        var height = $(this).outerHeight();
         var t = o-(height*1.3);
        if (h >= t) {
            $('.hide, hide-1') .css('background','green')
        
        }else {$('.hide, hide-1) .css('background','blue')}
    });
});