识别项目何时在网站上可见和不可见

Question

我正在构建一些代码来尝试在图像在视图中时发生某些事情，然后在图像不在视图中时重置计数器，如果图像返回视图，则再次发生相同的事情。

我的代码可以识别图像何时进入视野并执行某些操作，但是当我添加代码以在图像不在视野时重置计数器时，整个事情就停止了工作。

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")... 开头的代码，代码就可以工作，但代码中的 this 就不行了。

附：这是我需要在 iOS 上工作的网站。

Answer 1

那是因为您的 #button 点击处理程序抛出错误：

Uncaught TypeError: Object [object Object] has no method 'offsetTop'

如果您打开了控制台，您可以在 jsFiddle 页面上看到它（您可以通过 Settings->Safari->Developer 为移动 Safari 启用控制台）。

那个问题是$(window) 没有offsetTop() 方法。如果你摆脱了那条线（而且你也不需要它，因为你从来没有使用过scrollYY），一切正常。