it-swarm.com.ru

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

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

73
edubba

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

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

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

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

13
Shadow Wizard

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

11
JosephMCasey

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

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

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

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

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

9
drjorgepolanco

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

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

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

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

3
MD. Atiqur Rahman

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

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

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

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

0
Andrew Losseff