Uncaught TypeError: невозможно прочитать свойство "вверху" неопределенного

Прошу прощения, если на этот вопрос уже был дан ответ. Я пробовал искать решения, но не нашел ни одного, подходящего для моего кода. Я все еще новичок в jQuery.

У меня есть два разных типа липких меню для двух разных страниц. Вот код для обоих.

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

Моя проблема в том, что код для липкого бокового меню внизу не работает, потому что вторая строка кода вызывает var contentNav = $('.content-nav').offset().top;ошибку, которая гласит: «Uncaught TypeError: Cannot read property 'top' of undefined». Фактически, никакой другой код jQuery ниже этой второй строки вообще не работает, если он не размещен над ней.

После некоторого исследования я думаю, что проблема в том, что $('.content-nav').offset().topне удается найти указанный селектор, потому что он находится на другой странице. Если да, то я не могу найти решение.

Проверьте, содержит ли объект jQuery какой-либо элемент, прежде чем пытаться получить его смещение:

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

Ваш документ не содержит элемента с классом content-nav, поэтому метод .offset()возвращает undefined, который действительно не имеет topсвойства.

Вы можете сами убедиться в этой скрипке

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

(вы увидите "undefined")

Чтобы избежать сбоя всего кода, вы можете вместо этого использовать такой код:

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

Обновленная скрипка .

Я знаю, что это очень давно, но я понимаю, что этот тип ошибки - распространенная ошибка новичков, поскольку большинство новичков будут вызывать свои функции после загрузки элемента заголовка. Поскольку это решение вообще не рассматривается в этой теме, я добавлю его. Очень вероятно, что эта функция javascript была размещена до загрузки фактического HTML . Помните, что если вы немедленно вызовете свой javascript до того, как документ будет готов, тогда элементы, требующие элемента из документа, могут найти неопределенное значение.

Проблема, с которой вы, скорее всего, столкнулись, заключается в том, что где-то на странице есть ссылка на несуществующий якорь. Например, допустим, у вас есть следующее:

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

На странице должен быть элемент с этим идентификатором, например:

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

Поэтому убедитесь, что каждая из ссылок соответствует на странице с соответствующим якорем.

Я столкнулся с подобной проблемой и обнаружил, что я пытался получить смещение нижнего колонтитула, но я загружал свой скрипт внутри div перед нижним колонтитулом. Это было примерно так:

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

Итак, проблема была в том, что я вызывал элемент нижнего колонтитула до того, как нижний колонтитул был загружен.

Я поместил свой скрипт под нижний колонтитул, и он работал нормально!

У меня была такая же проблема («Uncaught TypeError: невозможно прочитать свойство 'top' of undefined»)

Я пробовал все решения, которые мог найти, и заметил, что помогло. Но потом я заметил, что у моего DIV было два идентификатора.

Итак, я удалил второй идентификатор, и он сработал.

Я просто хочу, чтобы кто-нибудь сказал мне раньше проверять удостоверения личности))