Uncaught Error: Cannot read property 'top' of null

Question

Ok, so I've worked through a number of bugs in the following short script.

You can see a working demo here: http://jsfiddle.net/XG24G/2/

Sorry for giving such an expansive context here, but when I plug the snippet from that JSFiddle.net example into the following code, my javascript console is giving me an Uncaught TypeError: Cannot read property 'top' of null. Oddly, this error is not present when checking the console for the JSFiddle example I posted above.

Here is my javascript (again sorry for the spam, but I need to show the full context here):

EDIT: I had pasted the wrong code in here previously, I've fixed it now

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

and here is my 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

Use .closest() instead of .parent(). Since <article> is not the immediate parent of .popup_next, .parent() is returning an empty jQuery object and .offset() returns null.