javascript - 目录如 JavaScript-Garden

Question

我想创建一个类似于 JavaScript Gardens 的目录.他们如何确定哪个部分当前处于事件状态，您是否有任何推荐的 JavaScript 库来实现此行为？

编辑:所以我要问的是如何在用户滚动时知道屏幕上当前处于事件状态的部分，以便我可以在目录中突出显示该部分。

Answer 1

您可以检测元素何时进入浏览器的视口(viewport)，然后突出显示相应的菜单项。

通过使用 Firebug在 Firefox 中，您可以看到它们使用窗口的 scrollTop 属性来了解用户正在查看的内容。

highlight: function () {
    // get the scroll height
    var scroll = this.page.window.scrollTop(),
        articleID = this.names[this.names.length - 1].id;
    // while our item are above the viewport, we enumerate
    for (var i = 0, l = this.names.length; i < l; i++) {
        if (this.names[i].offset > scroll) {
            articleID = this.names[i - 1].id;
            break;
        }
    }
    // we've got the content to highlight, let's add classes and expand menu-entries
    var sectionID = articleID.split('.')[0],
        page = this.page,
        nav = page.nav;

    if (sectionID !== page.section) {
        nav.filter('.nav_' + page.section).removeClass('active');
        nav.filter('.nav_' + sectionID).addClass('active');

        this.expand(sectionID);
        page.section = sectionID;
    }

    if (articleID !== page.article) {
        nav.find('a[href="#' + page.article + '"]').removeClass('active');
        nav.find('a[href="#' + articleID + '"]').addClass('active');

        page.article = articleID;
        this.mobile(articleID);
    }
}

在初始化过程中，他们找出每个部分的高度

init: function(attribute) {
 this.heights = this.page.nav.find('ul').map(function(idx, ele) {
 return $(this).outerHeight();
}).get();

从这两条信息中，他们可以通过将函数附加到窗口的滚动、调整大小等事件来突出显示用户正在查看的内容的正确条目。