title: How to use jquery to progressively modify Translate
body: <p>On my page I have this bit of code that will reduce the padding of the site header element proportionally to amount of scroll.</p>
  
  <pre><code>var $header = jQuery('.site-header'),
  padding = parseInt($header.css('padding'));
  
  jQuery(window).scroll(function (event) {
      $header.css({
        padding: padding -$(window).scrollTop()
     });
  });
  </code></pre>
  
  <p>How can I change this so in the same way it will translate an element downwards proportionally with the scroll?</p>
  
  <p>It seems easy with padding, but how would I write out "transform: translate(0px,0px)" so that only the Y is translated?</p>
  
  <p>***NEW****</p>
  
  <pre><code>var $banner = jQuery('.main-banner'),
  transform = parseInt($banner.css('transform').split(',')[5]);
  
  jQuery(window).scroll(function (event) {
   $banner.css({
      transform: 'translateY' +$(window).scrollTop()
    });
  });   
  </code></pre>