当div滚动到某个点以上时更改文本的颜色

Question

我希望当粉色div完全滚动到浏览器窗口底部的上方时，文本会更改颜色。 当粉红色的div再次部分滚动到浏览器窗口底部的下方时，文本应再次变为白色。

 $(document).ready(function(){ $(window).on('scroll' , function(){ var WindowScrollTop = $(this).scrollTop(), Div_one_top = $('#one').offset().top, Div_one_height = $('#one').outerHeight(true), Window_height = $(this).outerHeight(true); if(WindowScrollTop >= (Div_one_top + Div_one_height) - WindowScrollTop){ $('#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; } 

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

Answer 1

需要比较Window_height和WindowScrollTop的总和：

 $(document).ready(function(){ $(window).on('scroll' , function(){ var WindowScrollTop = $(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; } 

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