Changing Color Of Text When Div Is Scrolled Above Certain Point

I would like that the text changes color when the pink colored div is scrolled FULLY above the bottom egde of the browser window. When the pink colored div is scrolled partially be

Solution 1:

Need to compare sum of Window_height and WindowScrollTop:

$(document).ready(function(){
  $(window).on('scroll' , function(){
    varWindowScrollTop = $(this).scrollTop(),
        Div_one_top = $('#one').offset().top,
        Div_one_height = $('#one').outerHeight(true),
        Window_height = $(this).outerHeight(true);
    if(WindowScrollTop+Window_height >= (Div_one_top +  Div_one_height) ){
       $('#text1').css('color' , 'black');
    }else{
       $('#text1').css('color' , 'white');
    }
  }).scroll();
});

#one {
    height: 120vw;
    width: 100%;
    top: 0px;
    background-color: pink;
}

#text1 {
    width: 100%;
    font-size: 9em;
    margin-top: 100vw;
    position: absolute;
	  color:white;
}

#two {
    height: 50vw;
    width: 100%;
    top: 0px;
    background-color: green;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="one"><divid="text1">
        this is my text
    </div></div><divid="two"></div>