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>
Post a Comment for "Changing Color Of Text When Div Is Scrolled Above Certain Point"