我正在构建一些代码以尝试在图像在视图中时发生某些事情,然后在图像不在视图中时重置计数器,如果图像返回查看,则再次发生相同的事情。
我有代码可以识别图像何时进入视野并执行某些操作,但是当我添加代码以在图像不在视野时重置计数器时,整个事情就停止了工作。
html:
<div style="height: 2000px">
<img height="320px" width= "240px" id="pbr" src="http://i47.tinypic.com/33bztj8.jpg" alt="image 1">
<img height="320px" width= "240px" id="pbrglow" src="http://i48.tinypic.com/2ykduvl.jpg" alt="image 2">
<button id="button">click to reset</button>
</div>
CSS:
#pbr {
position: absolute;
top: 500px;
z-index: 0;
}
#pbrglow {
position: absolute;
display: none;
top: 500px;
z-index: 1;
}
#button {
position: absolute;
top: 850px;
z-index: 3;
}
javascript:
var y = $("#pbr").offset().top;
var eventsFired = 0;
$(window).scroll(function() {
var y = $("#pbr").offset().top;
var scrollY = $(window).scrollTop();
if (scrollY + 100 > y && eventsFired == 0) {
eventsFired++;
alert(eventsFired);
}
});
$("#button").on("click", function() {
var scrollYY = $(window).offsetTop();
if (eventsFired == 1) {
alert("happened");
eventsFired = 0;
}
}
这是带有代码的jsfiddle
一旦我删除了以 $("#button")... 开头的代码,代码就可以工作了,但是代码中的这个却没有。
PS这是一个我需要在iOS上工作的网站。