jquery - 获取当前位置的 div 的 ID

Question

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

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

但现在的问题是，当用户使用滚动条滚动页面时，我如何检测<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);
}