En esta entrada trataré un tema bastante técnico, explicando cómo resolver este error concreto. Durante el rediseño de mi página, quise modernizar los menús de navegación. Quería que el menú quedase fijado cuando se desplazase uno con el Scroll. Cuando estaba programando los efectos para ello, en base a ejemplos que había encontrado, me encontré con el siguiente error: «Uncaught TypeError: Cannot read property ‘top’ of undefined».
Contenidos
¿Por qué ocurre el error «Uncaught TypeError: Cannot read property ‘top’ of undefined»?
Al menos buscando información al respecto, enseguida supe porqué me ocurría y vi que no era la única. Pero no encontré ninguna información clara sobre cómo resolverlo.
Esto ocurre precisamente en el código de javascript que se añade para determinar la posición del menú respecto a la página. La propiedad «Top» (property ‘top’) intenta recuperar esta altura. Pero en caso de que el elemento para el que estamos intentando averiguarla no exista en la página, dará este error.
En mi caso ocurría porque tengo dos estilos de cabecera diferente según la página. La página principal, que es dónde tengo la cabecera a la que se debe aplicar este script. Y otro estilo para el resto de páginas, donde no existe esa cabecera. Por eso, en esas páginas me aparecía el error.
Resolviendo el error «Uncaught TypeError: Cannot read property ‘top’ of undefined»
En caso de que el nombre sea incorrecto
En algunos casos que vi en que les ocurría el error, se trataba de un problema con los nombres de las variables. Por ejemplo, el tema WordPress que utilizaban tenía definido el script referenciando el menú con un nombre que no es la que tenía luego asignado.
Lo primero sería ver si se quiere mantener el tema actual. De ser así, en este caso sería tan sencillo como cambiar la referencia en el Script, para que haga referencia a la clase correcta, o cambiar la clase del menú. Según se vea más sencillo. Al implicar esto el modificar código, podría ser interesante definir un tema «hijo» para evitar editar el tema original y que los cambios pudieran perderse.
En caso de que el elemento realmente no exista
Para resolverlo me planteé el cargar el Script sólo en la página principal. Pero el mismo fichero contenía también los efectos de navegación para la adaptación a móviles. (Reducir el menú a un botón de tipo «Hamburguesa» que abre y cierra el menú.) Por lo que no podía hacer eso, ya que esta parte sí aplicaba a toda la página.
Separar esta parte del script a otro fichero tampoco me convencía, porque cuantos más ficheros peor, y luego los medidores de velocidad muestran advertencias sobre esto.
Así que quería una solución diferente.
Al final lo que hice fue añadir una validación previa para verificar si la variable existe. Así que con esto, asunto resuelto.
// Código para añadir los efectos de la cabecera al hacer scroll
jQuery(function ($) {
if (typeof $('.mi-menu').offset() !== 'undefined') {
var altura = $('.mi-menu').offset().top;
if ($(document).scrollTop() > altura) {
$('.mi-menu').addClass('mi-menu-fixed');
}
// Fijar el menú de navegación al hacer scroll
$(document).on('scroll', function () {
if ($(document).scrollTop() > altura) {
$('.mi-menu').addClass('mi-menu-fixed');
} else {
$('.mi-menu').removeClass('mi-menu-fixed');
}
});
};
});
También podría interesarte…
- Cómo crear una página web
- Qué necesitas para crear una web en WordPress
- Seguridad en WordPress
- Copias de seguridad en WordPress
- Mi opinión sobre Divi Theme
Soy Taisa
Informática especializada en diseño web, bloguera, emprendedora, madre de dos niños… y me encanta la tecnología.
Desde hace varios años me dedico a impulsar a emprendedoras y blogueras que desean aumentar la visibilidad y los ingresos de sus negocios.
Por medio del diseño web, consultoría técnica y formación, optimizaremos juntas tu web y le sacaremos todo el partido, para que tu negocio suba de nivel y se convierta en un proyecto rentable y escalable.
Sos una genia, me resolviste la duda y reparé un script con tu ayuda, te añado a favs!
Gracias Raquel
¡Me alegro! 🙂
Hola Taisa
Interesante tu descripcion. Quisiera saber un poco mas del como hiciste para diagnostigar el error.
Si bien mi problema no es con un menu (es con un chartjs) creo que el problema viene con un tema de una variable ya que el chart me funciona en una pagina si y en otra no.
Si me pudieras como disgosticar el problema derepente encuentro la solucion
Saludos
¿Tienes exáctamente el error de la variable Top? El error aparece normalmente en la Consola. Si vas a las herramientas de desarrollador en Chrome podrás acceder.
Posiblemente, si dices que en un apartado funciona y en otros no, sí que sea porque los nombres de las variables a que hacen referencia no existan o sean diferentes. Tendrás que localizar el javascript del chart y revisar el código para ver esos detalles, y buscar en el código de la página los nombres de las variables. Porque si usas el truco de verificar si la variable existe o no, podría ser que algo igualmente no funcione. O que tengas que añadir una condición para que si no encuentra la variable con un nombre, mire con otro, si es que usa nombres diferentes.
En la consola de Chrome me estaba marque y marque el undefined a pesar de que el div en cuestión estaba totalmente visible. Al hacer algún resize u otras cosas a veces ya me funcionaba.. intenté utilizando el hide y luego un show, también poniendo el div en un alto temporal (por ejemplo 10px)
Mi problema era que el código lo intentaba dentro de un iframe. Para que funcione, en la consola, justo debajo de la pestaña, debemos cambiar de «top» al nombre del archivo con el cual estamos trabajando (incluso dice IFrame)
De esta manera los comandos de consola se van a ejecutar en dicho iframe y no en el top/padre
Oh, gracias por comentar tu caso. Claro, los iframe funcionan de forma independiente, y habría que especificarlo. Qué bien que encontrases la solución.