I am attempting to utilize jQuery in order to change the color of my border line depending on its position within the divs. I have set the position to absolute and it is positioned on both divs. My goal is to make the line on the top div appear as grey, while the line on the bottom div should be white. This color change should occur dynamically based on which section the line is over.
Link to CodePen: https://codepen.io/asreenz/pen/MWpGMQO
var top1height = $(".top-box" ).height();
var bottom1height = $(".bottom-box" ).height();
var linePosition = $(this).offset();
if(linePosition > top1height){
$(".line").addClass(".line-grey");
}
else {
$(".line").removeClass("line-grey");
}
if(linePosition > bottom1height){
$(".line").addClass(".line-white");
}
else {
$(".line").removeClass("line-white");
}.line{
width:0px;
height: 100px;
border: 1px solid black;
position:absolute;
left: 50%;
bottom: -225px;
transform: translate(-50%, -50%);
margin: 0 auto;
}
.top-box{
width:100vw;
height:500px;
background-color: pink;
}
.bottom-box{
width:100vw;
height:500px;
background-color: yellow;
}
.line-grey{
color:#8a96a3;
}
.line-white{
color:white;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="line">
</div>
<div class="top-box"></div>
<div class="bottom-box"></div>
</div>