获取当前位置div的ID

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

在顶部我放置了 2 个按钮，即“上一个”和“下一个”。当按下上一个按钮时，它将滚动到上一个<section>。与下一个类似<section>按“下一步”按钮。

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

您可以检查您的部分是否在“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);
}