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

Question

如果这个问题已经得到解答，我深表歉意。我尝试寻找解决方案，但找不到适合我的代码的解决方案。我对 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;

引发了一个错误，内容为“未捕获的类型错误：无法读取未定义的属性‘顶部’”。事实上，第二行下面的其他 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());

（你会看到“未定义”）

为了避免整个代码崩溃，您可以使用这样的代码：

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>

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

Answer 4

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

Answer 5

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

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

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

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

Answer 6

如果每当您单击

<a>

标签时出现此错误。尝试下面的代码。

正确：

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

发生此故障的原因是您的

<a>

标签内的 href 设置为 #。基本上，您的应用程序正在尝试查找不存在的 href。设置空href的正确方法如上所示。

错误：

<a href="#">

Answer 7

我遇到了同样的问题（“未捕获的类型错误：无法读取未定义的属性‘顶部’”）

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

所以，我删除了第二个ID，它起作用了。

我只是希望有人告诉我早点检查我的身份证））

Answer 8

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

太奇怪了:(

Answer 9

Mi errorera que aquí decía different el nombre que había declarado pero luego lo había editado entonces me había faltado editar en los códigos de más abajo que eran estos: tenía otro nombre porque aún yo no lo había editado entonces por ello me salía el error ，espero que a la hora que editen puedan editar todo para que no les aparezca ese Problema ya mencionado。 Espero que esto sea la solución para algunos q se quivocaron en estos detalles importantes