Uncaught TypeError: Không thể đọc thuộc tính 'top' của undefined

Tôi xin lỗi nếu câu hỏi này đã được trả lời. Tôi đã thử tìm kiếm các giải pháp nhưng không thể tìm thấy bất kỳ giải pháp nào phù hợp với mã của tôi. Tôi vẫn chưa quen với jQuery.

Tôi có hai loại menu dính khác nhau cho hai trang khác nhau. Đây là mã cho cả hai.

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

Vấn đề của tôi là mã cho menu bên dính ở dưới cùng không hoạt động vì dòng mã thứ hai var contentNav = $('.content-nav').offset().top;gây ra lỗi có nội dung "Uncaught TypeError: Cannot read property 'top' of undefined". Trên thực tế, không có mã jQuery nào khác bên dưới dòng thứ hai đó hoạt động trừ khi chúng được đặt ở trên nó.

Sau một số nghiên cứu, tôi nghĩ vấn đề là $('.content-nav').offset().topkhông thể tìm thấy bộ chọn được chỉ định vì nó nằm trên một trang khác. Nếu vậy, tôi không thể tìm ra giải pháp.

Kiểm tra xem đối tượng jQuery có chứa bất kỳ phần tử nào không trước khi bạn cố gắng lấy phần tử bù đắp của nó:

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

Tài liệu của bạn không chứa bất kỳ phần tử nào có lớp content-nav, do đó phương thức .offset()trả về không xác định thực sự không có thuộc toptính.

Bạn có thể tự mình thấy trong trò chơi này

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

(bạn sẽ thấy "không xác định")

Để tránh làm hỏng toàn bộ mã, bạn có thể có mã như vậy thay thế:

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

Cập nhật fiddle .

Tôi biết điều này rất cũ, nhưng tôi hiểu rằng loại lỗi này là lỗi phổ biến đối với người mới bắt đầu mắc phải vì hầu hết người mới bắt đầu sẽ gọi các hàm của họ khi phần tử tiêu đề của họ được tải. Thấy giải pháp này không được đề cập ở tất cả trong chủ đề này, tôi sẽ thêm nó. Rất có thể hàm javascript này đã được đặt trước khi html thực sự được tải . Hãy nhớ rằng, nếu bạn ngay lập tức gọi javascript của mình trước khi tài liệu sẵn sàng thì các phần tử yêu cầu một phần tử từ tài liệu có thể tìm thấy giá trị không xác định.

Vấn đề mà bạn rất có thể đang gặp phải là có một liên kết ở đâu đó trong trang đến một liên kết không tồn tại. Ví dụ: giả sử bạn có những thứ sau:

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

Phải có một phần tử trong trang với id đó, ví dụ:

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

Vì vậy, hãy đảm bảo rằng từng liên kết được khớp bên trong trang với ký tự liên kết tương ứng.

Tôi đã gặp sự cố tương tự và thấy rằng tôi đang cố gắng lấy phần bù của chân trang nhưng tôi đang tải tập lệnh của mình bên trong một div trước chân trang. Đó là một cái gì đó như thế này:

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

Vì vậy, vấn đề là, tôi đã gọi phần tử chân trang trước khi chân trang được tải.

Tôi đã đẩy tập lệnh của mình xuống dưới chân trang và nó hoạt động tốt!

Tôi gặp vấn đề tương tự ("Uncaught TypeError: Không thể đọc thuộc tính 'top' của undefined")

Tôi đã thử mọi giải pháp mà tôi có thể tìm thấy và ghi nhận sự giúp đỡ. Nhưng sau đó tôi phát hiện ra rằng DIV của tôi có hai ID.

Vì vậy, tôi đã xóa ID thứ hai và nó hoạt động.

Tôi chỉ ước ai đó nói với tôi để kiểm tra ID của tôi sớm hơn))