我希望当粉红色的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; }
this is my text
需要比较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; }
this is my text
以上就是jQuery教程分享当div在某个点上方滚动时，更改文本的颜色相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/jquerytutorial/559086.html