잡히지 않은 오류 : null의 'top'속성을 읽을 수 없습니다.

Question

좋아, 그럼 다음 짧은 스크립트에서 여러 가지 버그를 해결했습니다.

는 현재 작업 데모를 볼 수 있습니다 http://jsfiddle.net/XG24G/2/ 여기에 같은 광대 한 컨텍스트를 제공하지만, 나는 다음과 같은 코드로 JSFiddle.net 예 그에서 조각을 연결하면, 내 자바 스크립트 콘솔이 나에게주고있다위한

죄송합니다 Uncaught TypeError: Cannot read property 'top' of null. 이상하게도, 위에 게시 한 JSFiddle 예제를 콘솔에서 확인할 때이 오류가 표시되지 않습니다. 여기

내 자바 스크립트 (스팸에 다시 미안하지만 난 전체 여기 컨텍스트 표시해야합니다)입니다 :

편집 : 여기 이전에 잘못된 코드를 붙여했다, 나는 지금 그것을 고정했습니다

$(window).scroll(function(){ 
     // gets the position of the window 
      var y = $(window).scrollTop(); 

     $(".popup_next").each(function() { 
      var $parentOffset = $(this).parent('article').offset().top; 
      var $hideOffset = $parentOffset + 30; 
      if(y > ($parentOffset) && y < ($hideOffset)) { 
       $(this).fadeIn('350');} 
      if(y > ($hideOffset)) { 
       $(this).fadeOut('500');} 
      if(y < ($parentOffset)) { 
       $(this).fadeOut('500');}    
     }); 



     // for .popup_01 div 
     // fades a div in if it's within the scroll range and then back out if it's not 
      if(y > (2460) && y < (2650)){ 
      $(".popup_01").fadeIn('350');} 
      if(y > (2650)){ 
      $(".popup_01").fadeOut('500');} 
      if(y < (2460)){ 
      $(".popup_01").fadeOut('500');} 

     // for .popup_02 div 
     // fades a div in if it's within the scroll range and then back out if it's not 
      if(y > (2750) && y < (3050)){ 
      $(".popup_02").fadeIn('350');} 
      if(y > (3050)){ 
      $(".popup_02").fadeOut('500');} 
      if(y < (2750)){ 
      $(".popup_02").fadeOut('500');} 


     // for .popup_03 div 
     // fades a div in if it's within the scroll range and then back out if it's not 
      if(y > (5878) && y < (6378)){ 
      $(".popup_03").fadeIn('350');} 
      if(y > (6378)){ 
      $(".popup_03").fadeOut('500');} 
      if(y < (5878)){ 
      $(".popup_03").fadeOut('500');} 

}); 


// invoke jQuery.parallax-1.1.js and call related variables 

    //.moveRelative() options: 
    //x position 
    //adjuster (y position to start from) 
    //inertia (speed to move relative to vertical scroll) 
    //outerHeight (true/false) 
    $('#first').moveRelative("50%", 742, 0.05, true); 
    $('#first .grid').moveRelative("50%", 742, 0.8, true); 
    $('#third').moveRelative("50%", 4700, 0.08, true); 
    $('#fourth').moveRelative("50%", 5550, 0.08, true); 
    $('#fourth .overlay').moveRelative("50%", 5550, 0.14, true); 
    $('#fifth').moveRelative("50%", 7300, 0.4, true); 
    $('#sixth').moveRelative("50%", 7800, 0.2, true); 
    $('#sixth .grid').moveRelative("50%", 0, 0.8, true); 



// echo useragent string inside html element - useful for specific targeting of modern browsers 
    var b = document.documentElement; 
    b.setAttribute('data-useragent', navigator.userAgent); 
    b.setAttribute('data-platform', navigator.platform); 

여기에 사용 .closest() 대신 .parent() 내 HTML

<article class="section" id="second"> 
<div id="hannah_bg"> 

<div class="popup popup_next popup_second"><div class="inner"> 
<a class="scroll" href="#third">⇓</a> 
</div></div> 

<div class="popup popup_01"><div class="inner"> 
<h2 class="unforgettable"><strong>unforgettable</strong></h2> 
<h2 class="brand">brand identities</h2> 
</div></div> 

<div class="popup popup_02"><div class="inner"> 
<h2 class="powerful">Powerful</h2> 
<h2 class="elegant">&amp; elegant</h2> 
<p>development solutions that give<br>leverage to businesses of all sizes.</p> 
</div></div> 

</div><!-- /END #hannah_bg --> 
</article><!-- /END #second --> 

Answer 1

입니다. <article>은 .popup_next의 직접적인 부모가 아니므로 .parent()은 빈 jQuery 개체를 반환하고 .offset()은 null을 반환합니다.