getBoundingClientRect im einzelnen: undefined keine Funktion

So, ich bin versucht zu rufen, einige Funktionen aus, wenn Sie Vollbild-Abschnitte sind in den viewport. Sagen wir mal ich habe 7 Abschnitte, dann möchte ich, dass etwas passiert, wenn ein bestimmter Abschnitt innerhalb des Viewports (ich habe eine Funktion, die Schnappschüsse, die Abschnitte in den viewport, so kann es niemals mehrere Abschnitte im Ansichtsfenster, aber ich versuche herauszufinden, welcher Bereich sichtbar ist, in den viewport).

Hier ist ein Turnschuh: http://jsfiddle.net/h7Hb7/2/

function isInViewport() {
    $("section").each(function () {
        var $this = $(this),
            wHeight = $(window).height(),
            rect = $this.getBoundingClientRect(); //Error in console

        //Borrowed from http://stackoverflow.com/a/7557433/5628
        if (rect.top >= 0 && rect.bottom <= wHeight) {
            console.log($this.attr("id") + "in viewport");
        }
    });
}

$(window).scroll(function () {
    //Other functions are called inside the setTimeout function, can't remove
    clearTimeout($.data(this, "scrollTimer"));
    $.data(this, "scrollTimer", setTimeout(function () {
        isInViewport();
    }, 1200));
});

Ich weiß nicht, wo zu beginnen, aber ich bin zu raten, es zu tun, mit der jede Funktion. Ist es die jede Funktion, die ein problem darstellt? Es kann nicht ein CSS-Problem, denn das problem tritt auf Blättern, wenn die CSS hat bereits geladen ist.

InformationsquelleAutor Bram Vanroy | 2014-08-04