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

Uncaught 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: 정의되지 않은 속성 'top'을 읽을 수 없습니다."라는 오류가 발생합니다.실제로 두 번째 줄 아래에 있는 다른 jQuery 코드는 위에 배치되지 않는 한 작동하지 않습니다.

조사를 좀 해본 결과, 문제는$('.content-nav').offset().top지정한 선택기가 다른 페이지에 있으므로 찾을 수 없습니다.그렇다면, 저는 해결책을 찾을 수 없습니다.

오프셋을 가져오기 전에 jQuery 개체에 요소가 있는지 확인합니다.

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

가 " " " 인 .content-nav 방법은 다음과 같은 방법이 있습니다..offset()실제로 없는 정의되지 않은 반환top소유물.

당신은 이 바이올린에서 직접 볼 수 있습니다.

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

("슬립"이 표시됩니다.)

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

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

업데이트된 바이올린.

페이지 어딘가에 존재하지 않는 앵커에 대한 링크가 있다는 것이 가장 큰 문제입니다.예를 들어, 다음과 같은 기능이 있다고 가정합니다.

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

해당 ID를 가진 요소가 페이지에 있어야 합니다. 예:

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

따라서 각 링크가 페이지 내에서 해당 앵커와 일치하는지 확인합니다.

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

저는 비슷한 문제를 겪었고 바닥글의 오프셋을 얻으려고 했지만 바닥글 앞에 있는 div 안에 스크립트를 로드하고 있었습니다.이런 식이었습니다.

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

문제는 바닥글이 로드되기 전에 바닥글 요소를 호출했다는 것입니다.

저는 제 대본을 바닥글 아래로 밀어 넣었고 잘 작동했습니다.

다음을 클릭할 때마다 이 오류가 나타나는 경우<a>태그. 아래 코드를 사용해 보십시오.

정답:

<a href="javascript:void(0)">

이 오작동은 당신의 href가 당신의 내부에 #로 설정되어 있기 때문에 발생합니다.<a>태그. 기본적으로 당신의 앱은 존재하지 않는 href를 찾으려고 합니다.빈 href를 올바르게 설정하는 방법은 위에 나와 있습니다.

틀렸습니다:

<a href="#">

같은 문제가 있었습니다("Uncaught TypeError: 정의되지 않은 'top' 속성을 읽을 수 없습니다.")

저는 제가 찾을 수 있는 모든 해결책을 시도했고 도움이 되었다고 언급했습니다.그런데 제 DIV가 두 개의 ID를 가지고 있다는 것을 발견했습니다.

그래서 제가 두 번째 아이디를 제거했고 작동했습니다.

누군가가 내 아이디를 좀 더 일찍 확인하라고 말했으면 좋겠어요)

저의 경우 이상한 문제를 발견했는데, 사용자가 게시할 때 이 기능을 사용하여 마지막 댓글로 자동 스크롤하는데, 사실 한 페이지에 대해 활성화하고 다른 페이지에서 비활성화할 때 두 페이지에서 동일한 기능을 두 번 추가했는데, 두 페이지에서 활성화하면 해당 기능이 성공적으로 통과되었습니다.

너무 이상해요 :(

언급URL : https://stackoverflow.com/questions/20175094/uncaught-typeerror-cannot-read-property-top-of-undefined