Uncaught TypeError: Невозможно прочитать свойство 'top' из неопределенного

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

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

68 голосов | спросил edubba 24 72013vEurope/Moscow11bEurope/MoscowSun, 24 Nov 2013 17:35:05 +0400 2013, 17:35:05

6 ответов


0

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

var nav = $('.content-nav');
if (nav.length) {
  var contentNav = nav.offset().top;
  ...continue to set up the menu
}
ответил Guffa 24 72013vEurope/Moscow11bEurope/MoscowSun, 24 Nov 2013 17:45:04 +0400 2013, 17:45:04
0

Ваш документ не содержит элементов с классом content-nav, поэтому метод .offset() возвращает неопределенное , которое действительно не имеет свойства 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);
}

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

ответил Shadow Wizard 24 72013vEurope/Moscow11bEurope/MoscowSun, 24 Nov 2013 17:42:01 +0400 2013, 17:42:01
0

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

ответил JosephMCasey 23 rdEurope/Moscowp30Europe/Moscow09bEurope/MoscowTue, 23 Sep 2014 22:57:01 +0400 2014, 22:57:01
0

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

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

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

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

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

ответил drjorgepolanco 23 PM000000100000002431 2015, 22:28:24
0

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

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

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

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

ответил MD. Atiqur Rahman 31 Jpm1000000pmWed, 31 Jan 2018 20:37:48 +030018 2018, 20:37:48
0

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

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

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

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

ответил Andrew Losseff 22 MarpmWed, 22 Mar 2017 18:02:08 +03002017-03-22T18:02:08+03:0006 2017, 18:02:08

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132