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;「Uncaught TypeError：Undefined of 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
}

ドキュメントにclassの要素が含まれていない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);
}

フィドルを更新しました。

これは非常に古いことは知っていますが、ほとんどの初心者はヘッダー要素が読み込まれると関数を呼び出すため、このエラータイプは初心者がよく犯す間違いであることを理解しています。このソリューションはこのスレッドではまったく対処されていないので、追加します。このJavaScript関数は、実際のHTMLがロードされる前に配置された可能性が非常に高いです。ドキュメントの準備ができる前にすぐにJavaScriptを呼び出すと、ドキュメントの要素を必要とする要素が未定義の値を見つける可能性があることに注意してください。

あなたが持っている可能性が高い問題は、存在しないアンカーへのリンクがページのどこかにあるということです。たとえば、次のようなものがあるとします。

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

ページにはそのIDを持つ要素が必要です。例：

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

したがって、各リンクがページ内で対応するアンカーと一致していることを確認してください。

私は同様の問題を経験し、フッターのオフセットを取得しようとしていることがわかりましたが、フッターの前にdiv内にスクリプトをロードしていました。それはこのようなものでした：

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

つまり、問題は、フッターが読み込まれる前にフッター要素を呼び出していたことです。

スクリプトをフッターの下にプッシュしましたが、うまくいきました。

私は同じ問題を抱えていました（「Uncaught TypeError：プロパティ 'top' of undefined」を読み込めません）

私は見つけたすべての解決策を試しましたが、助けになりました。しかし、私のDIVに2つのIDがあることがわかりました。

だから、私は2番目のIDを削除し、それが機能しました。

誰かが私のIDを以前に確認するように言っただけです）