如何在滚动页面时，当页面距离顶部达到一定像素后触发事件？使用JavaScript或jQuery。

Question

我正在尝试在页面滚动距离顶部300px时触发视频。如果我向下滚动，这将起作用。

window.onscroll = function(event) {
myvideo.play();
}

但我希望滚动到300px时它能够播放。

- Zinox

Answer 1

你可以检查$(document).scrollTop()。

尝试一下：

 $(document).bind("scroll", function(){    
    if ($(document).scrollTop() >= 300) {
       myvideo.play();
    }
});

编辑

因为我们不希望电影在视频播放后用户滚动超过300个像素后每次都自动播放，所以可以取消事件绑定。

$(document).bind("scroll.myScroll", function(){    
    if ($(document).scrollTop() >= 300) {
        myvideo.play();
        $(document).unbind('.myScroll');
    }
});

DEMO

- laaposto

---

使用.one()而不是.scroll()会更好。不希望电影每次滚动超过300个像素时都播放。 - Eric

@laaposto 谢谢，Eris关于持续播放是正确的。 - Zinox

@Eric 谢谢，Eric会尝试使用.one()。 - Zinox

@Zinox 我已更新我的答案，现在它只会触发一次。 - laaposto

谢谢大家！虽然还有点困惑，但这给了我很好的启示。 - Zinox