Uncaught TypeError: kan eigenschap ‘top’ van undefined niet lezen

Mijn excuses als deze vraag al is beantwoord. Ik heb geprobeerd naar oplossingen te zoeken, maar kon er geen vinden die bij mijn code paste. Ik ben nog nieuw bij jQuery.

Ik heb twee verschillende soorten plakmenu’s voor twee verschillende pagina’s. Hier is de code voor 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();
    });
});

Mijn probleem is dat de code voor het plakkerige zijmenu onderaan niet werkt omdat de tweede regel code var contentNav = $('.content-nav').offset().top;geeft een foutmelding met de tekst “Uncaught TypeError: Cannot read property ‘top’ of undefined”. In feite werkt geen enkele andere jQuery-code onder die tweede regel helemaal, tenzij ze erboven worden geplaatst.

Na wat onderzoek denk ik dat het probleem is dat $('.content-nav').offset().topde opgegeven selector niet kan vinden omdat deze op een andere pagina staat. Als dat zo is, kan ik geen oplossing vinden.

Antwoord 1, autoriteit 100%

Controleer of het jQuery-object een element bevat voordat u de offset probeert te krijgen:

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

Antwoord 2, autoriteit 11%

Uw document bevat geen enkel element met klasse content-nav, dus de methode .offset()retourneert undefineddie inderdaad geen topeigenschap.

Je kunt het zelf zien in deze viool

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

(u ziet “undefined”)

Om te voorkomen dat de hele code crasht, kun je in plaats daarvan een dergelijke code gebruiken:

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

Fiddle bijgewerkt.

Antwoord 3, autoriteit 8%

Het probleem dat u waarschijnlijk ondervindt, is dat er ergens op de pagina een link staat naar een anker dat niet bestaat. Laten we bijvoorbeeld zeggen dat u het volgende heeft:

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

Er moet een element in de pagina zijn met die id, bijvoorbeeld:

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

Zorg er dus voor dat alle links op de pagina overeenkomen met het bijbehorende anker.

Antwoord 4, autoriteit 7%

Ik weet dat dit extreem oud is, maar ik begrijp dat dit type fout een veelvoorkomende fout is voor beginners, aangezien de meeste beginners hun functies zullen aanroepen wanneer hun header-element wordt geladen. Aangezien deze oplossing helemaal niet aan bod komt in deze thread, zal ik deze toevoegen. Het is zeer waarschijnlijk dat deze javascript-functie werd geplaatst voordat de eigenlijke html werd geladen. Onthoud dat als u uw javascript onmiddellijk aanroept voordat het document klaar is, elementen die een element uit het document vereisen, een ongedefinieerde waarde kunnen vinden.

Antwoord 5, autoriteit 2%

Ik liep tegen een soortgelijk probleem aan en ontdekte dat ik de offset van de voettekst probeerde te krijgen, maar ik laadde mijn script in een div vóór de voettekst. Het was ongeveer zo:

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

Dus het probleem was dat ik het footer-element aan het roepen was voordat de footer werd geladen.

Ik heb mijn script onder de voettekst ingedrukten het werkte prima!

Antwoord 6

Als deze fout verschijnt wanneer u op de tag <a>klikt. Probeer de onderstaande code.

JUIST :

<a href="javascript:void(0)">

Deze storing treedt op omdat uw HREF is ingesteld op # binnenkant van uw <a>TAG. Kortom, je app probeert Href te vinden die niet bestaat. De juiste manier om lege href in te stellen, wordt hierboven weergegeven.

verkeerd:

<a href="#">

Antwoord 7

Ik had hetzelfde probleem (“Uncoange TypeError: kan geen eigenschap ‘top’ van undefined”)

Ik heb elke oplossing geprobeerd die ik kon vinden en opmerken.
Maar dan heb ik gespot dat mijn div twee ID’s had.

Dus, ik heb tweede ID verwijderd en het werkte.

Ik wou dat iemand me heeft verteld om mijn ID’s eerder te controleren))

Antwoord 8

In mijn geval vond ik een vreemd probleem, ik gebruik deze functie om naar de laatste opmerking te autoscroll te staan ​​wanneer ze door gebruikers worden geplaatst, eigenlijk, ik heb dezelfde functie tweemaal op afzonderlijke pagina’s toegevoegd, wanneer ik het voor één pagina geactiveerd De andere het probleem treden op, wanneer deze op beide pagina’s activeert, is de functie met succes doorgegeven.

Zo vreemd: (