Error de tipo no detectado: no se puede leer la propiedad 'superior' de indefinido

Pido disculpas si esta pregunta ya ha sido respondida. Intenté buscar soluciones pero no pude encontrar 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 del menú lateral adhesivo en la parte inferior no funciona porque la segunda línea de código var contentNav = $('.content-nav').offset().top;genera un error que dice "Error de tipo no detectado: No se puede leer la propiedad 'superior' de indefinida". De hecho, ningún otro código jQuery debajo de esa segunda línea funciona a menos que se coloquen encima.

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

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

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

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

Puedes verlo por ti mismo en este violín

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

(verás "indefinido")

Para evitar fallar 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 .

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

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

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

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

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

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

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 de pie de página antes de que se cargara el pie de página.

Me empujó hacia abajo por debajo de mi guión pie de página y funcionó bien!

Tuve el mismo problema ("Error de tipo no detectado: no se puede leer la propiedad 'superior' de indefinida")

Probé todas las soluciones que pude encontrar y notar que ayudó. Pero luego me di cuenta de que mi DIV tenía dos identificaciones.

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

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