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？

*** **** NEW

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

如何使用jquery逐步修改Translate

1 个答案: