title: Uncaught Error: Cannot read property 'top' of null
body: <p>Ok, so I've worked through a number of bugs in the following short script.</p>
  
  <p>You can see a working demo here: <a href="http://jsfiddle.net/XG24G/2/" rel="nofollow">http://jsfiddle.net/XG24G/2/</a></p>
  
  <p>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 <code>Uncaught TypeError: Cannot read property 'top' of null</code>.  Oddly, this error is not present when checking the console for the JSFiddle example I posted above.</p>
  
  <p>Here is my javascript (again sorry for the spam, but I need to show the full context here):</p>
  
  <p><strong>EDIT: I had pasted the wrong code in here previously, I've fixed it now</strong></p>
  
  <pre><code>$(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 &gt; ($parentOffset) &amp;&amp; y &lt; ($hideOffset) ) {
                  $(this).fadeIn('350');}
              if( y &gt; ($hideOffset) ) {
                  $(this).fadeOut('500');}
              if( y &lt; ($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 &gt; (2460) &amp;&amp; y &lt; (2650) ){
              $(".popup_01").fadeIn('350');}
            if( y &gt; (2650) ){
              $(".popup_01").fadeOut('500');}
            if( y &lt; (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 &gt; (2750) &amp;&amp; y &lt; (3050) ){
              $(".popup_02").fadeIn('350');}
            if( y &gt; (3050) ){
              $(".popup_02").fadeOut('500');}
            if( y &lt; (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 &gt; (5878) &amp;&amp; y &lt; (6378) ){
              $(".popup_03").fadeIn('350');}
            if( y &gt; (6378) ){
              $(".popup_03").fadeOut('500');}
            if( y &lt; (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 );
  </code></pre>
  
  <p>and here is my HTML</p>
  
  <pre><code>&lt;article class="section" id="second"&gt;
  &lt;div id="hannah_bg"&gt;
  
  &lt;div class="popup popup_next popup_second"&gt;&lt;div class="inner"&gt;
  &lt;a class="scroll" href="#third"&gt;⇓&lt;/a&gt;
  &lt;/div&gt;&lt;/div&gt;
  
  &lt;div class="popup popup_01"&gt;&lt;div class="inner"&gt;
  &lt;h2 class="unforgettable"&gt;&lt;strong&gt;unforgettable&lt;/strong&gt;&lt;/h2&gt;
  &lt;h2 class="brand"&gt;brand identities&lt;/h2&gt;
  &lt;/div&gt;&lt;/div&gt;
  
  &lt;div class="popup popup_02"&gt;&lt;div class="inner"&gt;
  &lt;h2 class="powerful"&gt;Powerful&lt;/h2&gt;
  &lt;h2 class="elegant"&gt;&amp;amp; elegant&lt;/h2&gt;
  &lt;p&gt;development solutions that give&lt;br&gt;leverage to businesses of all sizes.&lt;/p&gt;
  &lt;/div&gt;&lt;/div&gt;
  
  &lt;/div&gt;&lt;!-- /END #hannah_bg --&gt;
  &lt;/article&gt;&lt;!-- /END #second --&gt;
  </code></pre>