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

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;触发了一个错误,上面写着"Uncaught TypeError:无法读取未定义的属性'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

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

Answer 4

您最有可能遇到的问题是页面中某处存在一个不存在的锚点.例如,假设您有以下内容:

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

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

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

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