转换div并在滚动上移动位置？ .scrollTop，.css转换

Question

我正在寻找一种简单的解决方案，可以将对象从一个地方移动到另一个地方。

我使用此代码制作了JSfiddle。问题是我需要它在某些时候停止变小。所以它有一个最小的尺寸，另一个问题是我希望它既缩小又向左移动？我能用矩阵实现这个目标吗？

$(window).scroll(function () {

    $(".fade-on-scroll").css("transform", "scale(" + (1 - $(window).scrollTop() / 700) + ")");

});

提前谢谢你！

Answer 1

您应该预先计算比例。这样你就可以强制执行限制。

var scale = (1 - $(window).scrollTop() / 700)
if (scale < .2) scale = .2

有关职位，请参阅translate (MDN)。您可以在同一行上设置比例和平移（即transform: scale(...) translate(...)）。