Question

我正在尝试检查“汽车”的位置，因此如果它位于top：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

要检查元素的特定位置，最好的方法是使用HTML 5 Canvas。使用Kinetic-js，您可以在画布上绘制对象，也可以在拖动对象时获得坐标。总体思路是，使用动力学js可以获取坐标，然后可以实现自己喜欢的任何东西。希望对您有帮助。

Answer 2

通过获取car与屏幕顶部的距离可以轻松解决您的问题：（而且，添加css的jquery已损坏）

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

之后，您可以使用它来向您的手机或其他任何设备添加课程。检查car元素的顶部不是一件很有用的事情。您检查的是从屏幕顶部开始的偏移量，而不是px，因为结果只是一个浮点数。另外，请检查汽车是否等于或更高，因为如果仅检查它是否相等，就永远不会发生。

在我编辑的示例中打开控制台，然后查看结果： https://jsfiddle.net/L2pf7cmu/

如何检查元素是否具有特定位置？

2 个答案: