未捕獲 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; 觸發了一個錯誤，讀取「未捕獲 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
}

次佳解決方法

您的文檔不包含 content-nav 類的任何元素，因此方法.offset()返回未定義，確實沒有 top 屬性。

您可以在 this fiddle 中看到自己

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

Updated fiddle 。

第三種解決方法

我知道這是非常老的，但我明白，這種錯誤類型是初學者常犯的錯誤，因為大多數初學者會在他們的頭元素加載時調用它們的功能。看到這個解決方案在這個線程中根本沒有解決，我將添加它。這個 JavaScript 函數很可能被放在實際的 html 加載之前。請記住，如果您在文檔準備好之前立即調用 JavaScript，則需要文檔中的元素的元素可能會找到未定義的值。

第四種方法

你最有可能遇到的問題是，頁面中有一個鏈接到不存在的錨點。例如，假設你有以下幾點：

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

在該頁面中必須有一個元素，例如：

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

所以確保每一個鏈接都與頁面中的對應的錨匹配。

參考文獻

Uncaught TypeError: Cannot read property ‘top’ of undefined

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

未捕獲 TypeError：無法讀取未定義的屬性’top’