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: Не вдається прочитати властивість" top "з 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()повертає невизначений, який насправді не має topвластивості.

Ви самі можете переконатися в цій скрипці

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

(ви побачите "невизначений")

Щоб уникнути збою цілого коду, ви можете замість нього мати такий код:

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' з undefined")

Я випробував кожне рішення, яке міг знайти, і, зазначивши, допомогло. Але тоді я помітив, що мій DIV мав два посвідчення особи.

Отже, я видалив другий посвідчення особи, і він спрацював.

Я б просто хотів, щоб хтось сказав мені перевірити мої посвідчення раніше))