title: Javascript $window is not defined when adding paralax scrolling
body: <p>I am currently building a time line based page with the different years, as this is a single page with a lot of info, I decided to go with the paralax scrolling effects available, to construct my page to work in the following manner:</p>
  
  <p><img src="https://i.stack.imgur.com/NzdKA.png" alt="enter image description here"></p>
  
  <p>I have added paralax scrolling based on <a href="http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/" rel="nofollow noreferrer">this</a> tutorial. But it does not function the way I want to.</p>
  
  <p>I have created this <a href="http://jsfiddle.net/Fumunchu/9CgFt/1/" rel="nofollow noreferrer">Fiddle</a> to try and demonstrate what I want it to do.</p>
  
  <p>I use the same JS as in the tutorial:</p>
  
  <pre><code> $(document).ready(function () {
          $('section[data-type="background"]').each(function () {
              var $bgobj = $(this); // assigning the object
  
              $(window).scroll(function () {
                  var yPos = -($window.scrollTop() / $bgobj.data('speed'));
  
                  // Put together our final background position
                  var coords = '50% ' + yPos + 'px';
  
                  // Move the background
                  $bgobj.css({ backgroundPosition: coords });
              });
          });
      });
  </code></pre>
  
  <p>But keep on getting the following message when scrolling through the page: <strong>Uncaught ReferenceError: $window is not defined</strong> Any advice or assistance would be greatly appreciated. </p>