Question

正如标题中所指定的那样，我正在收听scroll事件，以便在窗口中显示30％的video时触发某个功能 - 无论用户是向上还是向下滚动

有什么是这个：

// On DOM ready, I set the top and bottom offset of the video,
// +/- 30% of the video height

var $video = $('#js-b2b-video');
var videoHeight = $video.outerHeight();
var videoHeight30 = parseInt(videoHeight/3, 10); // Approx. 30% of the video height
var videoObj = {}

videoObj.top = $video.offset().top + videoHeight30; // Approx. 30% from the top of the video
videoObj.bottom = videoObj.top + videoHeight - videoHeight30; // Approx. 30% from the bottom of the video

然后，滚动事件：

$(window).on('scroll', function() {
    if ($(window).scrollTop() >= videoObj.top) {
        alert('30% from the top of the video reached');
    }
});

然而，当视频完全可见时，这种情况发生得太晚了。我需要的是在视频的顶部或底部的30％可见时立即触发我的功能。

我该如何正确地做到这一点？

Fiddle

Answer 1

您需要考虑窗口高度。

if ($(window).scrollTop() + $(window).height() >= videoObj.top) {

Answer 2

您可能还需要考虑窗口高度：

if ($(window).scrollTop() + window.innerHeight >= videoObj.top) {

请注意，您可能还想测试 onload 和调整大小 ...

Try it

如何检查用户是从顶部还是底部滚动到元素的30％

2 个答案: