Question

未捕获的类型错误：无法读取未定义的属性“top”

2013-11-24

430874

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: Cannot read property 'top' of undefined”。事实上，第二行以下的其他 jQuery 代码根本不起作用，除非它们放在第二行上方。

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

Answer 1

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

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

Answer 2

您的文档不包含任何具有 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);
}

更新的小提琴。

Answer 3

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

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

页面中必须有一个具有该 ID 的元素，例如：

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

因此，请确保页面中的每个链接都与其对应的锚点匹配。