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

Question

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

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

1814 6

jQuery javascript dom html css

6 ответов:

Comments

Ничего не найдено.

Guffa · Accepted Answer · 2013-11-24 15:45:04

проверьте, содержит ли объект jQuery какой-либо элемент, прежде чем пытаться получить его смещение:
var nav = $('.content-nav');
if (nav.length) {
  var contentNav = nav.offset().top;
  ...continue to set up the menu
}

Shadow Wizard · Accepted Answer · 2013-11-24 15:42:01

ваш документ не содержит никаких элементов с классом 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);
}
обновленный скрипку.

JosephMCasey · Accepted Answer · 2014-09-23 21:57:01

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

drjorgepolanco · Accepted Answer · 2015-08-23 22:28:24

проблема, с которой вы, скорее всего, сталкиваетесь, заключается в том, что где-то на странице есть ссылка на якорь, который не существует. Например, предположим, что у вас есть следующее:
<a href="#examples">Skip to examples</a>
на странице должен быть элемент с этим идентификатором, например:
<div id="examples">Here are the examples</div>
поэтому убедитесь, что каждая из ссылок соответствует внутри страницы с соответствующим якорем.

MD. Atiqur Rahman · Accepted Answer · 2018-01-31 19:37:48

Я пробежал через аналогичную проблему и обнаружил, что пытаюсь получить смещение нижнего колонтитула, но я загружал свой скрипт внутри div перед Нижним колонтитулом. Это было что-то вроде этого:
<div> I have some contents </div>
<script>
  $('footer').offset().top;
</script>
<footer>This is footer</footer>
Итак, проблема была, я был вызов элемента нижнего колонтитула до загрузки нижнего колонтитула.

Я толкнул мой скрипт ниже нижнего колонтитула и это сработало отлично!

Andrew Losseff · Accepted Answer · 2017-03-22 17:02:08

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

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

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

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