未捕獲錯誤：無法讀取null的屬性'top'

Question

好的，所以我在下面的短腳本中解決了一些錯誤。

這裏你可以看到一個工作演示：http://jsfiddle.net/XG24G/2/

對不起，這裏給出這樣一個廣闊的範圍內，但是當我從JSFiddle.net到例如下面的代碼插入代碼段，我的JavaScript控制檯給我一個Uncaught TypeError: Cannot read property 'top' of null。奇怪的是，當檢查我上面發佈的JSFiddle示例的控制檯時，此錯誤不存在。

這裏是我的javascript（用於垃圾郵件再次抱歉，但我需要顯示完整的上下文這裏）：

編輯：我曾在這裏之前粘貼代碼錯誤，我現在已經修好了

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

，這裏是我的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

使用.closest()，而不是.parent()。由於<article>不是.popup_next的直接父級，因此.parent()正在返回一個空的jQuery對象，並且.offset()返回null。