Uncaught TypeError: Не удается прочитать свойство 'top' из undefined

Прошу прощения, если этот вопрос уже был дан. Я попытался найти решения, но не смог найти подходящий код. Я все еще новичок в 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: невозможно прочитать свойство" верх "из undefined", На самом деле, никакой другой код jQuery ниже этой второй строки вообще не работает, если они не расположены над ним.

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

Ответ 1

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

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

Ответ 2

В документе нет элемента с классом 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);
}

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

Ответ 3

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

Ответ 4

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

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

Должен быть элемент на странице с этим id, например:

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

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

Ответ 5

У меня была такая же проблема ( "Uncaught TypeError: Не могу прочитать свойство" top "из undefined" )

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

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

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