[解決済み] Uncaught TypeError: 未定義のプロパティ 'top' を読み取れない

質問

この質問がすでに回答されていたら申し訳ありません。解決策を検索してみましたが、私のコードに合うものが見つかりませんでした。私はまだjQueryに慣れていないのです。

私は2つのページに対して2種類の付箋メニューを用意しています。以下は両方のコードです。

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

私の問題は、下部のスティッキーサイドメニューのコードが機能しないことで、2行目のコード var contentNav = $('.content-nav').offset().top; というエラーが発生します。Cannot read property 'top' of undefined"というエラーが発生します。実際、2行目以下の他のjQueryコードは、その上に配置されない限り、まったく動作しません。

いろいろ調べた結果、問題は $('.content-nav').offset().top は、指定されたセレクタが別のページにあるため、見つけることができません。もしそうなら、解決策が見つかりません。

解決方法は？

jQueryオブジェクトのオフセットを取得しようとする前に、そのオブジェクトに要素が含まれているかどうかを確認します。

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