在我的页面上,我有这段代码可以根据滚动量按比例减少网站标题元素的填充。
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()
});
});
最佳答案
好吧,我终于让这个工作了!
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
关于javascript - 如何使用jquery渐进修改Translate,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49124564/