JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myDiv"><img src="http://www.cadeau-maestro.com/1847-7362-thickbox_default/recharge-plante-click-and-grow-.jpg" width="300" />
<div id="white"></div>
</div>

CSS

body { 
height:1500px;
}

#myDiv {
    position:absolute;
    overflow:hidden;
    left:0;
    top:500px;
    height:300px;
    width:300px;
    background-color:#458963;
    color:#00f;
}

#white {
    position:absolute;
    left:0;
    top:0;
    height:300px;
    width:300px;
    background-color:#FFFFFF;
}

JavaScript

$(function(){
    $(window).on('scroll', function() {
        var $myDiv = $('#myDiv');
        var $myDivWhite = $('#white');
        var st = window.scrollY;
        var $myDivTop = ($myDiv.position().top) - 300;
        if ( st >= $myDivTop && st <= ($myDivTop + 300) ) {
            $myDivWhite.animate({'height':300-(st-$myDivTop)+'px' }, 10);
        }
        
        else if (st <= $myDivTop) {
            $myDivWhite.animate({'height':'300px' }, 10);
        }
        
        else if (st >= ($myDivTop + 300) ) {
            $myDivWhite.animate({'height':'0px' }, 10);
        }
    })
    .scroll();                     
})