Currently, I am attempting to monitor the position of the 'car'. When the car reaches a top offset of 200px, I would like to apply a specific property to the 'phone' element. The concept is that as you scroll down, the car will move, and when it aligns with the phone, the phone should flash.
I have implemented an If statement, but there seems to be an issue that I'm unable to pinpoint. Can someone assist me with this?
$(window).scroll(function () {
// You've scrolled this much:
var newSize = $(window).scrollTop()/20;
var srotate = "translateY(" + newSize + "px)";
$('.car').css({top:newSize,"-moz-transform" : srotate, "-webkit-transform" : srotate});
if($('.car').css('top') == '195px') {
$('.phone').css('box-shadow', '1px', '1px', '17px', '4px', '#42ab9e');
}
});.he {
height:4000px;
overflow-x: hidden;
}
.car{
right:20px;
position:fixed;
margin-top:20px;
display:block;
z-index:0;
}
.car img {
width: 40px;
}
.phone {
display:block;
position: absolute;
top: 1950px;
z-index:1;
padding-right: 6px;
right:0px;
}
.phone img {
width:67px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="he container"></div>
<div class="car">
<img src="http://www.image-maps.com/m/private/0/nai005qun3o0h9r81e0ndpvrh6_car.png" alt="car">
</div>
<div class="phone">
<img src="http://www.image-maps.com/m/private/0/nai005qun3o0h9r81e0ndpvrh6_phone.png" alt="">
</div>