change line color depending on where it sits on different divs [closed]

im trying to use jquery to make my border line change color depending on where it sits on the divs. i set position absolute and it is laying on both divs, so i was trying to make the line on the top div be the color grey and the line on the bottom div be white. i want to dynamically change it. ive attempted a code pen for it and am failing lol ive attached images of my codepen and also what im attempting to achieve. enter image description hereenter image description hereenter image description here

https://codepen.io/asreenz/pen/MWpGMQO link to codepen

<div>
    <div class="line">
    </div>
  <div class="top-box"></div>
  <div class="bottom-box"></div>
</div>

.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;
}

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"); 
   }

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW