Как проверить, имеет ли элемент определенную позицию?

Question

Я пытаюсь проверить положение «машины», поэтому, если оно сверху: 200px, я хочу добавить свойство в «телефон». Идея заключается в том, что когда вы прокручиваете страницу вниз, автомобиль движется, а когда автомобиль находится в пределах видимости телефона, телефон должен мигать.

Я даю утверждение If, но что-то сломано, и я не могу понять, что именно. Кто-нибудь, чтобы помочь?

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

Answer 1

Ваша проблема может быть легко решена путем получения расстояния car от верхней части экрана: (также, ваш jquery добавляющий css не работает)

if($('.car').offset().top >= 195) {
    $('.phone').css('box-shadow', '1px 1px 17px 4px #42ab9e');
}

После этого вы можете использовать это, чтобы добавить класс в свой телефон или что-нибудь еще. Проверка вершины элемента car не очень полезная вещь. Вы проверяете смещение от верхней части экрана, а не в пикселях, потому что в результате получается просто число с плавающей точкой. Кроме того, проверьте, равняется ли автомобиль или выше, потому что, если вы проверяете только на равенство, это может никогда не произойти.

Откройте консоль в моем отредактированном примере и посмотрите результаты: https://jsfiddle.net/L2pf7cmu/

Answer 2

Для проверки конкретной позиции элемента лучше всего использовать HTML 5 Canvas. С помощью Kinetic-js вы можете рисовать объекты на холсте, а когда объект перетаскивается, мы можем получить координаты. Общая идея заключается в том, что с помощью кинетической JS вы можете получить координаты, а затем вы можете получить все, что вам нравится. Я надеюсь, что это поможет вам.