未捕获的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;引发了一个错误，显示为“ Uncaught 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
}

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

你可以在这个小提琴中亲眼看到

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

（您将看到“未定义”）

为避免崩溃整个代码，您可以改用以下代码：

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

更新小提琴。

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

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

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

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

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

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

我遇到了类似的问题，发现我试图获取页脚的偏移量，但是我将脚本加载到页脚之前的div中。就像这样：

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

因此，问题是，在装入页脚之前，我正在调用页脚元素。

我将脚本放到页脚下方，效果很好！

我遇到了同样的问题（“未捕获的TypeError：无法读取未定义的属性'top'”）

我尝试了所有可以找到的解决方案，并指出了帮助。但是后来我发现我的DIV有两个ID。

因此，我删除了第二个ID，它起作用了。

我只希望有人告诉我早点检查我的ID））