Uncaught TypeError: impossible de lire la propriété 'top' de undefined

Je m'excuse si cette question a déjà reçu une réponse. J'ai essayé de rechercher des solutions mais je n'ai trouvé aucune qui convenait à mon code. Je suis encore nouveau sur jQuery.

J'ai deux types différents de menus collants pour deux pages différentes. Voici le code pour les deux.

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

Mon problème est que le code pour le menu latéral collant en bas ne fonctionne pas car la deuxième ligne de code var contentNav = $('.content-nav').offset().top;déclenche une erreur qui lit "Uncaught TypeError: Cannot read property 'top' of undefined". En fait, aucun autre code jQuery en dessous de cette deuxième ligne ne fonctionne à moins qu'ils ne soient placés au-dessus.

Après quelques recherches, je pense que le problème est que $('.content-nav').offset().tople sélecteur spécifié ne peut pas être trouvé car il se trouve sur une page différente. Si oui, je ne trouve pas de solution.

Vérifiez si l'objet jQuery contient un élément avant d'essayer d'obtenir son décalage:

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

Votre document ne contient aucun élément avec classe content-nav, donc la méthode .offset()retourne undefined qui n'a en effet aucune toppropriété.

Vous pouvez voir par vous-même dans ce violon

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

(vous verrez "undefined")

Pour éviter de planter tout le code, vous pouvez avoir un tel code à la place:

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

Violon mis à jour .

Je sais que c'est extrêmement ancien, mais je comprends que ce type d'erreur est une erreur courante pour les débutants, car la plupart des débutants appelleront leurs fonctions lors du chargement de leur élément d'en-tête. Vu que cette solution n'est pas du tout abordée dans ce fil, je vais l'ajouter. Il est très probable que cette fonction javascript ait été placée avant le chargement du html réel . N'oubliez pas que si vous appelez immédiatement votre javascript avant que le document ne soit prêt, les éléments nécessitant un élément du document peuvent trouver une valeur non définie.

Le problème que vous rencontrez probablement est qu'il y a un lien quelque part dans la page vers une ancre qui n'existe pas. Par exemple, disons que vous avez ce qui suit:

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

Il doit y avoir un élément dans la page avec cet identifiant, exemple:

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

Assurez-vous donc que chacun des liens correspond à l'intérieur de la page avec l'ancre correspondante.

J'ai rencontré un problème similaire et j'ai constaté que j'essayais d'obtenir le décalage du pied de page mais que je chargeais mon script dans un div avant le pied de page. C'était quelque chose comme ça:

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

Donc, le problème était que j'appelais l'élément de pied de page avant le chargement du pied de page.

J'ai poussé mon script sous le pied de page et cela a bien fonctionné!

J'ai eu le même problème ("Uncaught TypeError: Cannot read property 'top' of undefined")

J'ai essayé toutes les solutions que j'ai pu trouver et j'ai noté que cela m'a aidé. Mais ensuite, j'ai remarqué que mon DIV avait deux identifiants.

J'ai donc supprimé la deuxième pièce d'identité et cela a fonctionné.

Je souhaite juste que quelqu'un me dise de vérifier mes pièces d'identité plus tôt))