web-dev-qa-db-fra.com

Uncaught TypeError: Impossible de lire la propriété 'top' de non définie

Je m'excuse si cette question a déjà été répondue. J'ai essayé de chercher des solutions, mais je n'ai trouvé aucune solution adaptée à mon code. Je suis encore nouveau sur jQuery.

J'ai deux types 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; génère une erreur qui lit "Uncaught TypeError: Impossible de lire la propriété 'top' de indéfinie". En fait, aucun autre code jQuery situé au-dessous de cette seconde ligne ne fonctionne, à moins d'être placé au-dessus de celle-ci. 

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

javascriptjqueryhtmlcssdom
73
edubba

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
}
113
Guffa

Votre document ne contient aucun élément de classe content-nav; la méthode .offset() renvoie donc undefined qui, en effet, ne possède pas de propriété top.

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

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

(vous verrez "non défini")

Pour éviter de crasher tout le code, vous pouvez avoir ce code à la place:

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

Mise à jour du violon .

13
Shadow Wizard

Je sais que cela est extrêmement ancien, mais je comprends que ce type d'erreur est une erreur commune à commettre pour les débutants puisque la plupart des débutants appellent 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 code HTML réel . Rappelez-vous que si vous appelez immédiatement votre javascript avant que le document soit prêt, les éléments nécessitant un élément du document risquent de trouver une valeur indéfinie.

11
JosephMCasey

Le problème que vous rencontrez le plus probablement est qu’il existe un lien quelque part dans la page vers une ancre qui n’existe pas. Par exemple, supposons que vous ayez:

<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 son ancre correspondante.

9
drjorgepolanco

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 une 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 je appelais l'élément footer avant que le footer ne soit chargé.

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

3
MD. Atiqur Rahman

J'ai eu le même problème ("Uncaught TypeError: Impossible de lire la propriété 'top' of indéfini")

J'ai essayé toutes les solutions que je pouvais trouver et j'ai remarqué que cela avait aidé… .. Mais j'ai aussi remarqué que ma DIV avait deux ID.

Donc, j'ai enlevé la deuxième pièce d'identité et cela a fonctionné.

Je souhaite juste que quelqu'un m'a dit de vérifier mes identifiants plus tôt)) 

0
Andrew Losseff