포착되지 않은 TypeError : 정의되지 않은 'top'속성을 읽을 수 없습니다.

이 질문에 이미 답변을 하셨다면 사과드립니다. 솔루션 검색을 시도했지만 내 코드에 적합한 것을 찾을 수 없습니다. 나는 여전히 jQuery를 처음 사용합니다.

두 페이지에 대해 두 가지 유형의 고정 메뉴가 있습니다. 다음은 둘 다에 대한 코드입니다.

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

내 문제는 코드의 두 번째 줄에서 var contentNav = $('.content-nav').offset().top;"Uncaught TypeError : Cannot read property 'top'of undefined"라는 오류가 발생 하기 때문에 하단의 고정 사이드 메뉴에 대한 코드 가 작동하지 않는다는 것 입니다. 사실 두 번째 줄 아래의 다른 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());

( "undefined"가 표시됨)

전체 코드 충돌을 방지하기 위해 대신 다음 코드를 사용할 수 있습니다.

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

업데이트 된 바이올린 .

나는 이것이 매우 오래되었다는 것을 알고 있지만, 대부분의 초보자는 헤더 요소가로드 될 때 함수를 호출하기 때문에이 오류 유형은 초보자가 저지르는 일반적인 실수라는 것을 알고 있습니다. 이 솔루션이이 스레드에서 전혀 다루어지지 않았으므로 추가하겠습니다. 이 자바 스크립트 함수는 실제 html이로드되기 전에 배치 되었을 가능성 이 높습니다 . 문서가 준비되기 전에 즉시 자바 스크립트를 호출하면 문서의 요소가 필요한 요소가 정의되지 않은 값을 찾을 수 있습니다.

가장 가능성이 높은 문제는 페이지 어딘가에 존재하지 않는 앵커에 대한 링크가 있다는 것입니다. 예를 들어 다음이 있다고 가정 해 보겠습니다.

<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 : Cannot read property 'top'of undefined")

나는 내가 찾을 수있는 모든 해결책을 시도했고 도움이되었다. 그러나 나는 내 DIV에 두 개의 ID가 있음을 발견했습니다.

그래서 두 번째 ID를 제거하고 작동했습니다.

누군가가 일찍 내 ID를 확인하라고 말했으면 좋겠어))