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

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.

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
}

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 .

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.

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.

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!

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