未捕获 TypeError：无法读取未定义的属性’top’

问题描述

如果这个问题已经得到回答，我很抱歉。我已经尝试搜索解决方案，但找不到任何适合我的代码。我还是 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; 触发了一个错误，读取「未捕获 TypeError：不能读取未定义的属性’top’」。实际上，没有其他 jQuery 代码下面的第二行都可以使用，除非它们放在它的上方。

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

最佳解决方法

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

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

次佳解决方法

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

您可以在 this fiddle 中看到自己

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

Updated fiddle 。

第三种解决方法

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

第四种方法

你最有可能遇到的问题是，页面中有一个链接到不存在的锚点。例如，假设你有以下几点：

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

在该页面中必须有一个元素，例如：

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

所以确保每一个链接都与页面中的对应的锚匹配。

参考文献

Uncaught TypeError: Cannot read property ‘top’ of undefined

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

未捕获 TypeError：无法读取未定义的属性’top’