javascript - 如何使用jquery渐进修改Translate

Question

在我的页面上，我有这段代码可以根据滚动量按比例减少网站标题元素的填充。

var $header = jQuery('.site-header'),
padding = parseInt($header.css('padding'));

jQuery(window).scroll(function (event) {
    $header.css({
      padding: padding -$(window).scrollTop()
   });
});

我怎样才能改变它，让它以与滚动成比例向下移动元素的方式相同？

填充似乎很容易，但我如何写出“transform: translate(0px,0px)”以便只翻译 Y？

***新****

var $banner = jQuery('.main-banner'),
transform = parseInt($banner.css('transform').split(',')[5]);

jQuery(window).scroll(function (event) {
 $banner.css({
    transform: 'translateY' +$(window).scrollTop()
  });
});   

Answer 1

好吧，我终于让这个工作了!

 var $banner = jQuery('.main-banner'),
 transform = parseInt($banner.css('transform').split(',')[5]);

 jQuery(window).scroll(function (event) {
   $banner.css({
   "transform": "translateY("+ transform + $(window).scrollTop() +"px)"
   });
 });

现在有趣的部分是让它在一定数量的滚动后停止 :P