TypeError Tidak Tertangkap: Tidak dapat membaca properti 'atas' yang tidak ditentukan


94

Saya minta maaf jika pertanyaan ini sudah terjawab. Saya sudah mencoba mencari solusi tetapi tidak dapat menemukan yang cocok dengan kode saya. Saya masih baru mengenal jQuery.

Saya memiliki dua jenis menu lengket untuk dua halaman berbeda. Ini kode untuk keduanya.

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

Masalah saya adalah bahwa kode untuk menu sisi lengket di bagian bawah tidak berfungsi karena baris kedua kode var contentNav = $('.content-nav').offset().top;memicu kesalahan yang bertuliskan "Uncaught TypeError: Tidak dapat membaca properti 'atas' tidak terdefinisi". Faktanya, tidak ada kode jQuery lain di bawah baris kedua yang berfungsi sama sekali kecuali jika ditempatkan di atasnya.

Setelah beberapa penelitian, saya pikir masalahnya adalah $('.content-nav').offset().toptidak dapat menemukan pemilih yang ditentukan karena berada di halaman yang berbeda. Jika demikian, saya tidak dapat menemukan solusi.


1
tolong gunakan jsbin.com.
Royi Namir

periksa di html apakah div ada atau tidak
Bhadra

Jawaban:


146

Periksa apakah objek jQuery berisi elemen apa pun sebelum Anda mencoba mendapatkan offsetnya:

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

2
Ini bekerja! Dan solusi yang sangat sederhana. Saya harus belajar lebih banyak. Terima kasih banyak.
edubba

ya itu berhasil untuk saya juga. tetapi apa perbedaan antara var contentNav = $('.content-nav').offset().topdan kode Anda?
Prashant Tapase

@Prashant: Perbedaannya adalah bahwa kode tersebut memeriksa apakah jumlah elemen yang $('.content-nav')ditemukan panggilan itu bukan nol sebelum mencoba mendapatkan posisi elemen pertama yang ditemukan.
Guffa

1
stackoverflow.com/questions/28508939/… Saya memiliki tabel tetapi saya masih menerima kesalahan.
SearchForKnowledge

@Guffa terima kasih sobat! namun hanya ingin tahu ... Saya selalu memiliki elemen yang merupakan tag <header>. Apakah itu penting jika itu adalah <div> atau <header>?
Antonio Almeida

17

Dokumen Anda tidak berisi elemen apa pun dengan kelas content-nav, sehingga metode ini .offset()mengembalikan tidak terdefinisi yang memang tidak memiliki topproperti.

Anda bisa melihat sendiri di biola ini

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

(Anda akan melihat "tidak ditentukan")

Untuk menghindari crash seluruh kode, Anda dapat memiliki kode tersebut sebagai gantinya:

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

Biola diperbarui .


1
terima kasih atas jawaban ini saya memiliki masalah yang berbeda tetapi bekerja dengan sempurna
Naved Khan

12

Saya tahu ini sangat tua, tetapi saya mengerti bahwa jenis kesalahan ini adalah kesalahan umum yang dilakukan oleh pemula karena kebanyakan pemula akan memanggil fungsi mereka saat elemen header dimuat. Melihat solusi ini tidak ditujukan sama sekali di utas ini, saya akan menambahkannya. Kemungkinan besar fungsi javascript ini ditempatkan sebelum html yang sebenarnya dimuat . Ingat, jika Anda segera memanggil javascript sebelum dokumen siap maka elemen yang membutuhkan elemen dari dokumen mungkin menemukan nilai yang tidak ditentukan.


$ (dokumen) .ready (function () {...}); aktif saat dokumen dimuat dan tidak masalah di mana skrip berada. Tetapi Anda sejauh ini benar bahwa skrip apa pun tanpa pembungkus ini mungkin tidak berfungsi saat disebutkan di bagian atas halaman.
David

12

Masalah yang kemungkinan besar Anda alami adalah bahwa ada tautan di suatu tempat di halaman ke jangkar yang tidak ada. Misalnya, Anda memiliki yang berikut:

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

Harus ada elemen di halaman dengan id itu, contoh:

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

Jadi pastikan bahwa setiap tautan cocok di dalam halaman dengan jangkar yang sesuai.


3

Saya mengalami masalah serupa dan menemukan bahwa saya mencoba mendapatkan offset footer tetapi saya memuat skrip saya di dalam div sebelum footer. Itu seperti ini:

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

Jadi, masalahnya adalah, saya memanggil elemen footer sebelum footer dimuat.

Saya menekan skrip saya di bawah footer dan itu bekerja dengan baik!


0

Saya mengalami masalah yang sama ("Uncaught TypeError: Tidak dapat membaca properti 'top' of undefined")

Saya mencoba setiap solusi yang saya temukan dan menurut saya membantu. Tapi kemudian saya melihat bahwa DIV saya memiliki dua ID.

Jadi, saya menghapus ID kedua dan berhasil.

Saya hanya berharap seseorang mengatakan kepada saya untuk memeriksa ID saya lebih awal))

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.