Nicht gefangener 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 jedoch keine finden, die zu meinem Code passt. Ich bin noch neu bei jQuery.

Ich habe zwei verschiedene Arten von Sticky-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 Sticky-Side-Menü unten nicht funktioniert, da in der zweiten Codezeile var contentNav = $('.content-nav').offset().top;ein Fehler mit der Aufschrift "Uncaught TypeError: Eigenschaft 'top' von undefined kann nicht gelesen werden" ausgelöst wird. Tatsächlich funktioniert kein anderer jQuery-Code unterhalb dieser zweiten Zeile, es sei denn, sie werden darüber platziert.

Nach einigen Recherchen besteht das Problem darin, dass $('.content-nav').offset().topder angegebene Selektor nicht gefunden werden kann, da er sich auf einer anderen Seite befindet. Wenn ja, kann ich keine Lösung finden.

Überprüfen Sie, ob das jQuery-Objekt ein Element enthält, bevor Sie versuchen, seinen Offset abzurufen:

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

Ihr Dokument enthält kein Element mit der Klasse content-nav, so dass die Methode .offset()kehrt nicht definiert , was in der Tat keine hat topEigenschaft.

Sie können sich in dieser Geige selbst davon überzeugen

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

(Sie sehen "undefiniert")

Um einen Absturz des gesamten Codes zu vermeiden, können Sie stattdessen folgenden Code verwenden:

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

Geige aktualisiert .

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 behandelt wird, werde ich sie hinzufügen. Es ist sehr wahrscheinlich, dass diese Javascript-Funktion platziert wurde, bevor das eigentliche HTML geladen wurde . Denken Sie daran, dass Elemente, die ein Element aus dem Dokument benötigen, möglicherweise einen undefinierten Wert finden, wenn Sie Ihr Javascript sofort aufrufen, bevor das Dokument fertig ist.

Das Problem, das Sie höchstwahrscheinlich haben, ist, dass irgendwo auf der Seite ein Link zu einem Anker vorhanden ist, der nicht vorhanden ist. Angenommen, Sie haben Folgendes:

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

Auf der Seite muss sich ein Element mit dieser ID befinden, Beispiel:

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

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

Ich habe ein ähnliches Problem durchlaufen und festgestellt, dass ich versucht habe, den Versatz der Fußzeile zu ermitteln, aber ich habe mein Skript in ein div vor der Fußzeile geladen. Es war ungefähr so:

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

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

Ich habe mein Skript unter die Fußzeile gedrückt und es hat gut funktioniert!

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

Ich habe jede Lösung ausprobiert, die ich finden konnte, und festgestellt, dass sie geholfen hat. Aber dann habe ich festgestellt, dass mein DIV zwei IDs hatte.

Also habe ich die zweite ID entfernt und es hat funktioniert.

Ich wünschte nur, jemand hätte mir gesagt, ich solle meine Ausweise früher überprüfen.