javascript - vacio - validar undefined jquery

Unkeught TypeError: no se puede leer la propiedad ''top'' de undefined

Question

Me disculpo si esta pregunta ya ha sido respondida. Intenté buscar soluciones pero no encontré ninguna que se adaptara a mi código. Todavía soy nuevo en jQuery.

Tengo dos tipos diferentes de menús adhesivos para dos páginas diferentes. Aquí está el código para ambos.

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

Mi problema es que el código para el menú lateral adhesivo en la parte inferior no funciona porque la segunda línea de código var contentNav = $(''.content-nav'').offset().top; desencadena un error que dice "TypeError no detectado: no se puede leer la propiedad ''top'' de undefined". De hecho, ningún otro código jQuery debajo de esa segunda línea funciona en absoluto a menos que se coloquen por encima.

Después de investigar un poco, creo que el problema es que $(''.content-nav'').offset().top no puede encontrar el selector especificado porque está en una página diferente. Si es así, no puedo encontrar una solución.

Answer 1

Compruebe si el objeto jQuery contiene algún elemento antes de intentar obtener su desplazamiento:

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

Answer 2

El problema que probablemente tenga es que hay un enlace en algún lugar de la página a un delimitador que no existe. Por ejemplo, digamos que tienes lo siguiente:

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

Tiene que haber un elemento en la página con esa identificación, por ejemplo:

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

Así que asegúrese de que cada uno de los enlaces coincidan dentro de la página con su anclaje correspondiente.

Answer 3

Me encontré con un problema similar y descubrí que estaba tratando de obtener el desplazamiento del pie de página, pero estaba cargando mi script dentro de un div antes del pie de página. Fue algo como esto:

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

Entonces, el problema era que estaba llamando al elemento del pie de página antes de cargar el pie de página.

Empujé mi guión debajo del pie de página y funcionó bien.

Answer 4

Sé que esto es extremadamente antiguo, pero entiendo que este tipo de error es un error común para los principiantes ya que la mayoría de los principiantes llamarán a sus funciones cuando carguen el elemento del encabezado. Viendo que esta solución no se trata en absoluto en este hilo, la agregaré. Es muy probable que esta función de javascript se coloque antes de que se cargue el html real . Recuerde, si llama inmediatamente a su javascript antes de que el documento esté listo, los elementos que requieren un elemento del documento pueden encontrar un valor indefinido.

Answer 5

Su documento no contiene ningún elemento con content-nav clase content-nav , por lo que el método .offset() devuelve indefinido, que de hecho no tiene ninguna propiedad top .

Puedes ver por ti mismo en este violín

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

(Verá "indefinido")

Para evitar bloquear todo el código, puede tener dicho código en su lugar:

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

Violín actualizado

Answer 6

Tuve el mismo problema ("TypeError no detectado: no se puede leer la propiedad ''top'' de undefined")

Probé cada solución que pude encontrar y noté que me ayudó. Pero luego descubrí que mi DIV tenía dos ID.

Entonces, eliminé la segunda identificación y funcionó.

Solo desearía que alguien me dijera que revise mis identificaciones antes))