未捕获的TypeError:无法读取未定义的属性“top”

时间:2013-11-24 13:35:05

标签: javascript jquery html css dom

如果这个问题已经得到解答,我道歉。我试过寻找解决方案,但找不到任何适合我的代码。我还是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'of undefined” 。实际上,除非它们位于第二行之上,否则第二行下面的其他jQuery代码根本不起作用。

经过一番研究,我认为问题是$('.content-nav').offset().top无法找到指定的选择器,因为它位于不同的页面上。如果是这样,我找不到解决方案。

8 个答案:

答案 0 :(得分:120)

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

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

答案 1 :(得分:13)

您的文档不包含任何类content-nav的元素,因此方法.offset()返回 undefined ,它确实没有top属性。

您可以在this fiddle

中看到自己
alert($('.content-nav').offset());

(你会看到“未定义”)

为避免崩溃整个代码,您可以改为使用此类代码:

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

Updated fiddle

答案 2 :(得分:11)

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

答案 3 :(得分:9)

您最有可能遇到的问题是页面中某处存在一个不存在的锚点。例如,让我们说你有以下内容:

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

页面中必须有一个带有该ID的元素,例如:

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

因此,请确保每个链接在页面内与其相应的锚点匹配。

答案 4 :(得分:3)

我遇到了类似的问题,发现我试图获取页脚的偏移但我在脚本之前将我的脚本加载到div中。它是这样的:

view.animate().rotationBy(-90);

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

将我的脚本下推到页脚下,它运行正常!

答案 5 :(得分:1)

如果每当您单击<a>标记时出现此错误。尝试下面的代码。

正确:

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

发生此故障是因为您的href设置为<a>标记内的#。基本上,您的应用正在尝试查找不存在的href。上面显示了设置空href的正确方法。

错误:

<a href="#">

答案 6 :(得分:0)

我遇到了同样的问题(“Uncaught TypeError:无法读取未定义的属性'top')

我尝试了我能找到的所有解决方案并注意到了帮助。 但后来我发现我的DIV有两个ID。

所以,我删除了第二个ID并且它有效。

我希望有人告诉我先检查我的身份证明))

答案 7 :(得分:0)

就我而言,我发现了一个奇怪的问题,当用户发布时,我使用此功能自动滚动到最后一条评论,实际上,我在不同的页面中两次添加了相同的功能,当为一页激活它并在其中禁用它时另一个出现问题,在两个页面中激活它时,功能成功通过。

好奇怪:(