Javascript 确定项目在网站上的显示时间和不显示时间

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

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

html:

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;
    }
}

下面是代码的示例

一旦我删除了以$（“#按钮”）开头的代码。。。代码是可以工作的，但是代码中有了它就不行了

另外，这是一个我需要在iOS上工作的网站

这是因为您的

#按钮

单击处理程序抛出了一个错误：

未捕获类型错误：对象[Object Object]没有方法“offsetTop”

如果打开了控制台，您可以在JSFIDLE页面上看到它（您可以通过设置->Safari->Developer为mobile Safari启用控制台）

---

问题是

$（窗口）

没有

offsetTop（）

方法。如果你去掉了这一行（反正你也不需要它，因为你从来没有使用过

scrollYY

），一切都会好起来。

我知道你说你的目标是iOS，但你在其他浏览器上试过吗？它在哪工作，在哪不工作？控制台中有JS错误吗？我在iOS上运行它的原因是因为它被用作我在手机上向某人展示的演示。我一直收到这样一个错误：ReferenceError:resetfunction未定义@fiddle.jshell.net/\u display/:1。不知道为什么它说我没有定义函数。更新了JSFIDLE-在您的示例中，单击按钮时会调用html的resetfunction（）。但是你从来没有在任何地方定义过resetfunction。我对iOS的评论不是说你不应该使用iOS，而是说你可以在非iOS浏览器上测试以帮助诊断问题。所以这就是我不太清楚的地方。在javascript中，我有代码函数resetfunction（），这不是定义函数吗？对不起，我还是个新手。我更改了JSFIDLE-我看不到对

function resetfunction（）

的任何引用，谢谢你。我删除了offsetTop（）行，但它仍然不起作用。我还意识到我不是从html按钮调用函数。但是现在我添加了代码，它仍然不起作用。当我单击图像下的按钮时，它会打开一个警报。您是否介意查看更新后的JSFIDLE，看看是否有任何问题。谢谢这就是我单击按钮时得到的结果--[13:23:49.415]ReferenceError:resetfunction未定义@。不确定我需要如何“定义”它。发生此错误是因为浏览器找不到

resetfunction

。也许在正常情况下（即不在jsFiddle中），它可能会按照您的方式工作，bc

resetfunction

将是全局范围的一部分。但是，即使它能够工作，通过全局范围放置和调用函数也不是很好的形式。最好取出

onclick=“resetfunction（）；”

位，通过javascript订阅按钮点击事件：

$（'button'）。点击（resetfunction）（只需在代码中的某个位置添加此行）。此外，您应该将所有代码包装在$.ready中（function（）{/*此处的所有代码*/}）；
#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;
}

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;
    }
}