Uncaught TypeError: Cannot read property 'top' of undefined

I apologize if this question has already been answered. I've tried searching for solutions but could not find any that suited my code. I'm still new to jQuery.

I have two different types of sticky menus for two different pages. Here's the code for both. 

$(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();
});
});

My problem is that the code for the sticky side menu on the bottom doesn't work because the second line of code var contentNav = $('.content-nav').offset().top; fires a error that reads "Uncaught TypeError: Cannot read property 'top' of undefined". In fact, no other jQuery code below that second line works at all unless they are placed above it.

After some researching, I think the problem is that $('.content-nav').offset().top can't find the specified selector because it's on a different page. If so, I can't find a solution.

398438 次浏览
小开

您的文档不包含任何具有 content-nav类的元素，因此方法 .offset()返回的 未定义实际上没有 top属性。

You can see for yourself in 这把小提琴

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

(you will see "undefined")

为了避免整个代码崩溃，您可以使用这样的代码:

var top = ($('.content-nav').offset() || { "top": NaN }).top;
if (isNaN(top)) {
alert("something is wrong, no top");
} else {
alert(top);
}

更新小提琴。

小开
最佳答案

在尝试获取其偏移量之前，检查 jQuery 对象是否包含任何元素:

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

我知道这是非常古老的，但是我理解这种错误类型是初学者经常犯的错误，因为大多数初学者会在加载头元素时调用他们的函数。鉴于这个解决方案在这个线程中根本没有提到，我将添加它。很有可能 这个 javascript 函数是在加载实际的 html 之前放置的。请记住，如果在文档准备好之前立即调用 javascript，那么需要文档中元素的元素可能会找到未定义的值。

小开

您最可能遇到的问题是，页面中的某个地方有一个链接指向一个不存在的锚。例如，假设您有以下内容:

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

页面中必须有一个元素具有这个 id，例如:

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

因此，请确保每个链接都与页面内部的相应锚匹配。

小开

我遇到了同样的问题(“ UncatedTypeError: 无法读取未定义的属性‘ top’”)

I tried every solution I could find and noting helped. 但后来我发现我的 DIV 有两张身份证。

所以我移除了第二个身份，成功了。

我只是希望有人早点告诉我要检查我的身份证)

小开

我也遇到过类似的问题，发现我正在尝试获取 footer 的偏移量，但是我正在页脚之前的 div 中加载我的脚本。大概是这样的:

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

所以，问题是，我是 在加载页脚之前调用页脚元素。

I 把我的脚本压到页脚下面 and it worked fine!

小开

如果在单击 <a>标记时出现此错误，请尝试下面的代码。

正确答案:

<a href="javascript:void(0)">

This malfunction occurs because your href is set to # inside of your <a> tag. Basically, your app is trying to find href which does not exist. The right way to set empty href is shown above.

错:

<a href="#">
小开

在我的例子中，我发现了一个奇怪的问题，我使用这个函数来自动滚动到最后一条评论，当用户发布的时候，实际上，我在不同的页面中添加了两次相同的函数，当在一个页面激活它时，在另一个页面中禁用它时，问题发生了，当在两个页面中激活它时，这个函数成功地通过了。

真奇怪


提交答案