Прошу прощения, если на этот вопрос уже был дан ответ. Я пробовал искать решения, но не нашел ни одного, подходящего для моего кода. Я все еще новичок в 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: Cannot read property 'top' of 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 }
источник
var contentNav = $('.content-nav').offset().top
и вашим кодом?$('.content-nav')
обнаруженных вызовом, ненулевым, прежде чем пытаться получить позицию первого найденного элемента.Ваш документ не содержит элемента с классом
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); }
Обновленная скрипка .
источник
Я знаю, что это очень давно, но я понимаю, что этот тип ошибки - распространенная ошибка новичков, поскольку большинство новичков будут вызывать свои функции после загрузки элемента заголовка. Поскольку это решение вообще не рассматривается в этой теме, я добавлю его. Очень вероятно, что эта функция 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' of undefined»)
Я пробовал все решения, которые мог найти, и заметил, что помогло. Но потом я заметил, что у моего DIV было два идентификатора.
Итак, я удалил второй идентификатор, и он сработал.
Я просто хочу, чтобы кто-нибудь сказал мне раньше проверять удостоверения личности))
источник