转换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(...)）。