title: Parallax Scrolling scrollTop
body: <p>I am needing a bit of help with parallax scrolling. I am trying to have an image stick to the bottom of the top div. Here is the jQuery </p>
  
  <pre><code>function parallax() {
  var scrollPosition = jQuery(window).scrollTop();
  jQuery('#grid').css('top', (0 - (scrollPosition * .5))+'px' );
  }
  </code></pre>
  
  <p>Right now it is sticking to the top of the browser window when scrolled. I have used a higher number such as <code>jQuery('#grid').css('top', (134 - (scrollPosition * .5))+'px' );</code></p>
  
  <p>This gives me the proper spacing when the page loads but as soon as I scroll, white can be seen on top of the div. I am not to familiar with jQuery so any help would be appreciated.</p>
  
  <p>Basically how can I assign the top position of the div to the variable <code>scrollPosition</code>.  </p>
  
  <p>/<strong>* UPDATE *</strong>/
  Sorry, here are a some more details on the issue. </p>
  
  <p>Here is a <a href="http://jsfiddle.net/nunotmp/Bz9CY/" rel="nofollow">jsfiddle</a></p>
  
  <p>See how is stick to the top of the window? I would like for it to stick to the bottom of the header. </p>