it-swarm.com.de

Nicht erfasstes TypeError: Die Eigenschaft 'top' von undefined kann nicht gelesen werden

Ich entschuldige mich, wenn diese Frage bereits beantwortet wurde. Ich habe versucht, nach Lösungen zu suchen, konnte aber keine passende Lösung für meinen Code finden. Ich bin noch neu bei jQuery.

Ich habe zwei verschiedene Arten von klebrigen Menüs für zwei verschiedene Seiten. Hier ist der Code für beide. 

$(document).ready(function () {
    var contentNav = $('.content-nav').offset().top;
    var stickyNav = function () {
        var scrollTop = $(window).scrollTop();
        if (scrollTop > contentNav) {
            $('.content-nav').addClass('content-nav-sticky');
        } else {;
            $('.content-nav').removeClass('content-nav-sticky')
        }
    };
    stickyNav();
    $(window).scroll(function () {
        stickyNav();
    });
});
$(document).ready(function () {
    var stickyNavTop = $('.nav-map').offset().top;
    // var contentNav = $('.content-nav').offset().top;
    var stickyNav = function () {
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
            $('.nav-map').addClass('sticky');
            // $('.content-nav').addClass('sticky');
        } else {
            $('.nav-map').removeClass('sticky');
            // $('.content-nav').removeClass('sticky')
        }
    };
    stickyNav();
    $(window).scroll(function () {
        stickyNav();
    });
});

Mein Problem ist, dass der Code für das klebrige Seitenmenü unten nicht funktioniert, da die zweite Codezeile var contentNav = $('.content-nav').offset().top; einen Fehler auslöst, der lautet "Uncught TypeError: Kann die Eigenschaft 'top' von undefined nicht lesen". In der Tat funktioniert kein anderer jQuery-Code unterhalb dieser zweiten Zeile, es sei denn, er ist darüber platziert. 

Nach einigen Nachforschungen denke ich, das Problem ist, dass $('.content-nav').offset().top den angegebenen Selektor nicht finden kann, da er sich auf einer anderen Seite befindet. Wenn ja, kann ich keine Lösung finden.

73
edubba

Prüfen Sie, ob das jQuery-Objekt ein Element enthält, bevor Sie versuchen, den Versatz abzurufen:

var nav = $('.content-nav');
if (nav.length) {
  var contentNav = nav.offset().top;
  ...continue to set up the menu
}
113
Guffa

Ihr Dokument enthält kein Element mit der Klasse content-nav. Daher gibt die Methode .offset()undefined zurück, die tatsächlich keine top-Eigenschaft hat.

Sie können selbst sehen in diese Geige

alert($('.content-nav').offset());

(Sie werden "undefined" sehen)

Um den gesamten Code nicht zum Absturz zu bringen, können Sie stattdessen solchen Code verwenden:

var top = ($('.content-nav').offset() || { "top": NaN }).top;
if (isNaN(top)) {
    alert("something is wrong, no top");
} else {
    alert(top);
}

Geige aktualisiert .

13
Shadow Wizard

Ich weiß, dass dies extrem alt ist, aber ich verstehe, dass dieser Fehlertyp ein häufiger Fehler für Anfänger ist, da die meisten Anfänger ihre Funktionen beim Laden ihres Header-Elements aufrufen. Da diese Lösung in diesem Thread überhaupt nicht angesprochen wird, füge ich sie hinzu. Es ist sehr wahrscheinlich, dass diese Javascript-Funktion vor dem Laden der eigentlichen HTML-Datei platziert wurde . Denken Sie daran, wenn Sie Ihr Javascript sofort aufrufen, bevor das Dokument fertig ist, können Elemente, die ein Element aus dem Dokument erfordern, einen undefinierten Wert finden.

11
JosephMCasey

Das Problem, das Sie wahrscheinlich haben, ist, dass irgendwo auf der Seite ein Link zu einem Anker existiert, der nicht existiert. Angenommen, Sie haben Folgendes:

<a href="#examples">Skip to examples</a>

Auf der Seite muss ein Element mit dieser ID vorhanden sein, zum Beispiel:

<div id="examples">Here are the examples</div>

Stellen Sie daher sicher, dass jeder Link innerhalb der Seite mit dem entsprechenden Anker übereinstimmt.

9
drjorgepolanco

Ich ging durch ein ähnliches Problem und stellte fest, dass ich versuchte, den Versatz der Fußzeile zu ermitteln, aber ich lud mein Skript vor der Fußzeile in ein div. Es war so etwas:

<div> I have some contents </div>
<script>
  $('footer').offset().top;
</script>
<footer>This is footer</footer>

Das Problem war also, ich war das Fußzeilenelement aufrief, bevor die Fußzeile geladen wurde.

Ich drückte mein Skript unter die Fußzeile und es hat gut funktioniert!

3

Ich hatte das gleiche Problem ("Nicht abgerufener TypeError: Eigenschaft 'top' von undefined kann nicht gelesen werden)

Ich versuchte jede Lösung, die ich finden konnte, und bemerkte, dass es geholfen hat ... Aber dann habe ich entdeckt, dass mein DIV zwei IDs hatte.

Also entfernte ich die zweite ID und es funktionierte.

Ich wünschte nur, dass mir jemand gesagt hat, ich solle meine IDs früher überprüfen.)) 

0
Andrew Losseff