javascript - jQuery :in-viewport selector accuracy

Question

我有一个容器，有多个 <div> s 在里面，代表页面。当用户滚动浏览这些页面时，我想更新当前页码标签。为此，我发现我可以使用 :in-viewport 选择器。我试着按照这个example ，并想出了这个 jsFiddle:

http://jsfiddle.net/j2aet/

这似乎可行，但我确实遇到了一个小问题。那就是当我向下滚动时，我当前的页码不会更改为“2”，直到第二个“图像”元素部分隐藏(在顶部)，并且第 3 页部分可见。我希望它早点更改为 2。请参阅此屏幕截图了解我的意思，这是它变为“2”的时间:

http://imgur.com/l40ddBs

理想情况下，我希望在第二个“图像”元素成为大多数 View 的元素后立即将当前页码更改为“2”。例如，这是关于我希望当前页码更改为“2”的位置:

http://imgur.com/uKZRD4m (注意#2 是如何成为大多数人的)

而且随着我不断滚动，情况似乎变得更糟。在下一个屏幕截图中，当前页码仍然显示为 5，但是第 5 张图片根本不在 View 中!

http://imgur.com/tr10aoU

我可以做些什么来达到这个效果？现在我正在使用 in:viewport选择器结合 :first选择器:

$('.item:in-viewport:first')

Answer 1

您可以尝试通过以下方式检查每个项目向上滚动时的位置。它并不完美，代码更多，但希望这能给您一些想法。

这是 fiddle示例和下面的代码。

$container.off('scroll').on('scroll', function () {
    var top = $(this).offset().top;

    $(".item").each(function()
    {  
        var itemTop = $(this).offset().top;
        var itemBottom = $(this).offset().top + $(this).height(); 
        if(itemTop >= (top + 25) && itemTop <= (top + 50))
            $cp.html($(this).attr("page"));
        else if(itemBottom >= (top + 400) && itemBottom <= (top + 425))
            $cp.html($(this).attr("page"));

    });
});