获取div的ID在当前位置

Question

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

在顶部,我放置2个按钮,分别显示上一个和下一个.按下Previous时,它将滚动到Previous <section>.与下一个<section>按下Next Button 类似.

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

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

你可以将它绑定到 $(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);
}