javascript - 未捕获的TypeError：无法读取未定义的属性“top”(Uncaught TypeError: Cannot read property 'top' of undefined)

Question

I apologize if this question has already been answered.

(如果这个问题已经得到解答，我道歉。)

I've tried searching for solutions but could not find any that suited my code.

(我试过寻找解决方案，但找不到任何适合我的代码。)

I'm still new to jQuery.

(我还是jQuery的新手。)

I have two different types of sticky menus for two different pages.

(我有两种不同类型的粘性菜单，用于两个不同的页面。)

Here's the code for both.

(这是两者的代码。)

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

My problem is that the code for the sticky side menu on the bottom doesn't work because the second line of code var contentNav = $('.content-nav').offset().top;

(我的问题是底部粘性侧菜单的代码不起作用，因为第二行代码var contentNav = $('.content-nav').offset().top;)

fires a error that reads "Uncaught TypeError: Cannot read property 'top' of undefined".

(触发一条错误，内容为“Uncaught TypeError：无法读取未定义的属性'top'”。)

In fact, no other jQuery code below that second line works at all unless they are placed above it.

(实际上，除非它们位于第二行之上，否则第二行下面的其他jQuery代码根本不起作用。)

After some researching, I think the problem is that $('.content-nav').offset().top can't find the specified selector because it's on a different page.

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

If so, I can't find a solution.

(如果是这样，我找不到解决方案。)

  ask by edubba translate from so

Answer 1

Check if the jQuery object contains any element before you try to get its offset:

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

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