Question

我在页面中有n个<section>。每个都提供id，例如'page1'，'page2'......

在顶部，我放置2个按钮，分别显示上一个和下一个。按下Previous时，它将滚动到上一个<section>。与按下“下一步按钮”时的下一个<section>类似。

但现在问题是当用户使用滚动条滚动页面时，如何检测用户正在查看哪个<section>？

Answer 1

您可以检查您的部分是否在“ViewPort”中，我使用此部分来查找：

function isTotallyInViewPort($entry){
    var windowScrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();
    var windowVisibleBottom = windowScrollTop + windowHeight;
    var entryTop = $entry.offset().top;
    var entryOuterHeight = $entry.outerHeight();
    var entryVisibleBottom = entryTop + entryOuterHeight;

    var isInView = windowScrollTop < ( entryTop ) < (windowVisibleBottom);
    if(!isInView) return false;

    var isCompleteInView = ( entryVisibleBottom ) < (windowVisibleBottom);
    return isCompleteInView;
}

如果要检测是否显示PARTS，只需创建一个函数，检查当前视图是否与您的部分位置重叠。

你可以将它绑定到$（window）.on（“scroll”）

编辑：我认为这应该检测你的元素是否显示（尚未测试）

function isPartlyInViewPort($entry){
    var windowScrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();
    var windowVisibleBottom = windowScrollTop + windowHeight;
    var entryTop = $entry.offset().top;
    var entryOuterHeight = $entry.outerHeight();
    var entryVisibleBottom = entryTop + entryOuterHeight;

    var isAboveViewPort = entryVisibleBottom < windowScrollTop;
    var isBelowViewPort = windowVisibleBottom < entryTop;

    return !(isAboveViewPort || isBelowViewPort);
}

获取div的ID在当前位置

1 个答案: