3

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

http://jsfiddle.net/j2aet/

这似乎有效，但我确实有一个小问题。那就是当我向下滚动时，我当前的页码不会更改为“2”，直到第二个“图像”元素部分隐藏（在顶部），并且第 3 页部分可见。我希望它尽快更改为 2。请参阅此屏幕截图以了解我的意思，这是它更改为“2”的时候：

http://imgur.com/l40ddBs

理想情况下，只要第二个“图像”元素是占多数的元素，我希望当前页码更改为“2”。例如，这是关于我希望当前页码更改为“2”的位置：

http://imgur.com/uKZRD4m（注意#2 是大多数人的看法）

随着我不断滚动，它似乎变得更糟。在下一个屏幕截图中，当前页码仍然是 5，但第 5 张图像根本看不到了！

http://imgur.com/tr10aoU

我可以做些什么来达到这种效果？现在我只是将in:viewport选择器与选择器结合使用:first：

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

2 回答 2

1

这是我最终的结果：

$container.on('scroll', function () {
    // for each item in viewport, which one is in view the MOST?
    var diff = null;
    var num;
    $('.item:in-viewport').each(function(){
        var thisPage = $(this).attr("page");
        var thisTop = $(this).position().top;

        if(diff == null){
            diff = Math.abs(containerTop - thisTop);
            num = thisPage;
        } else {
            var temp = Math.abs(containerTop - thisTop);
            if(temp < diff) {
                diff = temp;
                num = thisPage;
            }
        }
    });
    diff = null;
    $cp.html(num);
});

http://jsfiddle.net/j2aet/1/

我仍然可以使用:in-viewport选择器，但我没有将它与:first选择器结合使用，而是遍历视图中的每个项目并找出最接近容器顶部的项目。可能有一种更有效的方法来做到这一点，但现在这将起作用。

更新（性能）：

按照我在这里找到的想法，我们可以选择仅在用户完成滚动至少半秒后更新页码：

$container.on('scroll', function () {
    if(this.scrollTo) clearTimeout(this.scrollTo);
    this.scrollTo = setTimeout(function () { updatePageNumber();}, 500);
});

function updatePageNumber(){
    // for each item in viewport, which one is in view the MOST?
    var diff = null;
    var num;
    $('.item:in-viewport').each(function(){
        var thisPage = $(this).attr("page");
        var thisTop = $(this).position().top;

        if(diff == null){
            diff = Math.abs(containerTop - thisTop);
            num = thisPage;
        } else {
            var temp = Math.abs(containerTop - thisTop);
            if(temp < diff) {
                diff = temp;
                num = thisPage;
            }
        }
    });
    diff = null;
    $cp.html(num);
}

http://jsfiddle.net/j2aet/2/

于 2013-11-05T15:14:52.033 回答
1

这是一种方法，您可以尝试在每个项目向上滚动时检查它们的位置。它并不完美，它有更多的代码，但希望这将有助于给你一些想法。

这是小提琴示例，下面是代码。

$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"));

    });
});
于 2013-11-04T22:28:49.523 回答