Javascript 未捕获类型错误:无法读取属性';顶部';未定义的
如果这个问题已经得到回答,我很抱歉。我试图寻找解决方案,但找不到任何适合我的代码。我对jQuery还是新手 我有两种不同类型的粘性菜单,用于两个不同的页面。这是两者的代码Javascript 未捕获类型错误:无法读取属性';顶部';未定义的,javascript,jquery,html,css,dom,Javascript,Jquery,Html,Css,Dom,如果这个问题已经得到回答,我很抱歉。我试图寻找解决方案,但找不到任何适合我的代码。我对jQuery还是新手 我有两种不同类型的粘性菜单,用于两个不同的页面。这是两者的代码 $(document).ready(function () { var contentNav = $('.content-nav').offset().top; var stickyNav = function () { var scrollTop = $(window).scrollTop()
$(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代码>引发一个错误,其内容为“UncaughtTypeError:无法读取未定义的属性'top'。事实上,第二行下面的其他jQuery代码根本不能工作,除非它们放在上面
经过一些研究,我认为问题在于,$('.content nav').offset().top
找不到指定的选择器,因为它位于不同的页面上。如果是这样,我找不到解决方案。您的文档不包含任何classcontent nav
的元素,因此方法.offset()
返回未定义的元素,该元素实际上没有top
属性
你可以亲眼看到
(您将看到“未定义”)
为了避免整个代码崩溃,您可以使用以下代码:
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>
以下是示例
因此,请确保页面中的每一个链接都与其对应的锚点相匹配。我也有同样的问题(“未捕获的TypeError:无法读取未定义的属性“top”)
我尝试了我能找到的每一个解决办法,但没有任何帮助。
但后来我发现我的部门有两个身份证
所以,我删除了第二个ID,它成功了
我只是希望有人告诉我早些时候检查我的ID。)我遇到了类似的问题,发现我试图获取页脚的偏移量,但我正在页脚之前的一个div中加载脚本。是这样的:
<div> I have some contents </div>
<script>
$('footer').offset().top;
</script>
<footer>This is footer</footer>
我有一些内容
$('footer').offset().top;
这是页脚
所以,问题是,我在加载页脚之前调用了页脚元素。
我把我的脚本压到了页脚下方,效果很好 如果每次单击
标记时出现此错误。请尝试下面的代码
正确:
<a href="javascript:void(0)">
<a href="#">
发生此故障是因为您的href设置为#在
标记内。基本上,您的应用程序正在尝试查找不存在的href。上面显示了设置空href的正确方法
错误:
<a href="javascript:void(0)">
<a href="#">
在我的例子中,我发现了一个奇怪的问题,我使用此功能自动滚动到用户发布的最后一条评论,实际上,我在单独的页面中添加了两次相同的功能,当在一个页面中激活它,在另一个页面中禁用它时,问题发生,当在两个页面中激活它时,功能成功通过
很奇怪:(请使用jsbin.com。检查html中是否存在div!这是一个多么简单的解决方案。我还有很多东西要学习。谢谢大家。是的,它对我也有用。但是var contentNav=$('.content nav').offset()之间的区别是什么.top
和您的代码?@Prashant:区别在于代码检查$(“.content nav”)中包含的元素数
call found在试图获取找到的第一个元素的位置之前是非零的。我有这个表,但我仍然收到了错误。@Guffa谢谢你,伙计!但是我只是想知道…我总是把元素放在一个标记的位置上。如果它是一个或?$(文档)。就绪(函数(){…});在加载文档时激发,而不管脚本位于何处。但是您说得太对了,没有此包装的任何脚本在页面顶部注明时都可能无法工作。谢谢您的回答我有不同的问题,但它工作得非常好