web-dev-qa-db-ja.com

捕捉されない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：未定義のプロパティ 'top'を読み取れません"というエラーを発生させるため、一番下のスティッキサイドメニューのコードが機能しないことです。実際、その2行目より下の他のjQueryコードは、それより上に配置されていない限り、まったく機能しません。

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

javascriptjqueryhtmlcssdom
80
edubba

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

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

あなたの文書はクラスcontent-navを持つ要素を含んでいません。そのためメソッド.offset()は（topプロパティを全く持たない）undefinedを返します。

あなた自身で見ることができます このフィドル

alert($('.content-nav').offset());

（あなたは "未定義"が表示されます）

コード全体がクラッシュしないようにするには、代わりにこのようなコードを使用できます。

var top = ($('.content-nav').offset() || { "top": NaN }).top;
if (isNaN(top)) {
    alert("something is wrong, no top");
} else {
    alert(top);
}

更新されたフィドル 。

13
Shadow Wizard

私はこれが非常に古いことを知っています、しかし私はほとんどの初心者がそれらのヘッダー要素がロードされると彼らの機能を呼ぶのでこのエラータイプが初心者がするのが一般的な間違いであることを理解します。この解決策はこのスレッドではまったく扱われていないため、追加します。それは非常にありそうですこのJavaScript関数は実際のhtmlがロードされる前に置かれました。ドキュメントの準備が整う前にすぐにJavaScriptを呼び出すと、ドキュメントの要素を必要とする要素が未定義の値を見つける可能性があります。

11
JosephMCasey

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

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

そのIDを持つ要素がページになければなりません、例えば：

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

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

9
drjorgepolanco

私は同様の問題を経験したところ、フッターのオフセットを取得しようとしていましたが、フッターの前のdiv内にスクリプトをロードしていました。こんな感じでした。

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

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

私が自分のスクリプトをフッターの下にプッシュダウンしたところ、うまくいきました。

3
MD. Atiqur Rahman

私は同じ問題を抱えていました（ "TypeErrorが見つかりません：未定義のプロパティ 'top'を読み込めません"）

私は見つけることができたすべての解決策を試してみましたが、助けになりました。しかし、それから私は私のDIVが2つのIDを持っていることを発見しました。

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

誰かが私に以前に自分のIDをチェックするように言ってくれたらいいのに））

0
Andrew Losseff