Uncaught TypeError: Impossibile leggere la proprietà 'top' di undefined

Mi scuso se questa domanda ha già ricevuto risposta. Ho provato a cercare soluzioni ma non sono riuscito a trovarne nessuna adatta al mio codice. Sono ancora nuovo su jQuery.

Ho due diversi tipi di menu permanenti per due pagine diverse. Ecco il codice per entrambi.

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

Il mio problema è che il codice per il menu laterale fisso in basso non funziona perché la seconda riga di codice var contentNav = $('.content-nav').offset().top;genera un errore che dice "Uncaught TypeError: Cannot read property 'top' of undefined". In effetti, nessun altro codice jQuery sotto quella seconda riga funziona a meno che non sia posizionato sopra di essa.

Dopo alcune ricerche, penso che il problema sia che $('.content-nav').offset().topnon riesco a trovare il selettore specificato perché si trova su una pagina diversa. Se è così, non riesco a trovare una soluzione.

Controlla se l'oggetto jQuery contiene un elemento prima di provare a ottenere il suo offset:

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

Il tuo documento non contiene alcun elemento con classe content-nav, quindi il metodo .offset()restituisce undefined che in effetti non hatop proprietà.

Puoi vedere di persona in questo violino

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

(vedrai "undefined")

Per evitare di bloccare l'intero codice, puoi invece avere tale codice:

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

Violino aggiornato .

So che questo è estremamente vecchio, ma capisco che questo tipo di errore è un errore comune da fare per i principianti poiché la maggior parte dei principianti chiamerà le proprie funzioni dopo il caricamento del proprio elemento di intestazione. Visto che questa soluzione non è affatto affrontata in questo thread, la aggiungerò. È molto probabile che questa funzione javascript sia stata inserita prima del caricamento dell'html effettivo . Ricorda, se chiami immediatamente il tuo javascript prima che il documento sia pronto, gli elementi che richiedono un elemento dal documento potrebbero trovare un valore indefinito.

Il problema che molto probabilmente hai è che c'è un collegamento da qualche parte nella pagina a un'ancora che non esiste. Ad esempio, supponiamo che tu abbia quanto segue:

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

Deve esserci un elemento nella pagina con quell'ID, esempio:

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

Quindi assicurati che ciascuno dei link corrisponda all'interno della pagina con l'ancora corrispondente.

Ho riscontrato un problema simile e ho scoperto che stavo cercando di ottenere l'offset del piè di pagina ma stavo caricando il mio script all'interno di un div prima del piè di pagina. Era qualcosa del genere:

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

Quindi, il problema era, lo ero chiamando l'elemento piè di pagina prima che il piè di pagina fosse caricato.

Ho spinto il mio script sotto il piè di pagina e ha funzionato bene!

Ho avuto lo stesso problema ("Uncaught TypeError: Impossibile leggere la proprietà 'top' di undefined")

Ho provato tutte le soluzioni che sono riuscito a trovare e notare mi ha aiutato. Ma poi ho notato che il mio DIV aveva due ID.

Quindi, ho rimosso il secondo ID e ha funzionato.

Vorrei solo che qualcuno mi dicesse di controllare i miei documenti prima))