Question

I want to create a table of content similar to JavaScript Gardens. How do they determine which section is currently active and do you have any recommended JavaScript libraries that imlpement this behavior?

Edit: So the thing I am asking for is how to know which section currently is active on the screen while the user is scrolling so that I can highlight that section in the table of content.

Answer 1

You can detect when an element enters the viewport of your browser, and then highlight the corresponding menu entry.

By using Firebug in Firefox, you can see that they use the scrollTop property of the window to know what the user is looking at.

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);
    }
}

During the initialization they find out what each part takes in height

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

From these two pieces of info, they can highlight the correct entry to what the user is looking at, by attaching the function to the scroll, resize, etc… events of the window.