当div滚动到某个点以上时更改文本的颜色 [英] changing color of text when div is scrolled above certain point

问题描述

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

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 below the bottom edge of the browser window again the text should be white again.

$(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>

推荐答案

需要比较Window_height和WindowScrollTop的总和:

Need to compare sum of Window_height and 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>

这篇关于当div滚动到某个点以上时更改文本的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！