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

포착되지 않은 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());

( "정의되지 않음"이 표시됨)

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

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

업데이트 된 바이올린 .

---

I know this is extremely old, but I understand that this error type is a common mistake for beginners to make since most beginners will call their functions upon their header element being loaded. Seeing as this solution is not addressed at all in this thread, I'll add it. It is very likely that this javascript function was placed before the actual html was loaded. Remember, if you immediately call your javascript before the document is ready then elements requiring an element from the document might find an undefined value.

---

The problem you are most likely having is that there is a link somewhere in the page to an anchor that does not exist. For instance, let's say you have the following:

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

There has to be an element in the page with that id, example:

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

So make sure that each one of the links are matched inside the page with it's corresponding anchor.

---

I ran through similar problem and found that I was trying to get the offset of footer but I was loading my script inside a div before the footer. It was something like this:

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

So, the problem was, I was calling the footer element before the footer was loaded.

I pushed down my script below footer and it worked fine!

---

I had the same problem ("Uncaught TypeError: Cannot read property 'top' of undefined")

I tried every solution I could find and noting helped. But then I've spotted that my DIV had two IDs.

So, I removed second ID and it worked.

I just wish somebody told me to check my IDs earlier))

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