转换 div 并在滚动上移动位置？ .scrollTop, .css 变换答案

【问题标题】：Transform div and move position on scroll? .scrollTop, .css transform转换 div 并在滚动上移动位置？ .scrollTop, .css 变换
【发布时间】：2018-01-01 19:16:17
【问题描述】：

我正在寻找一种简单的解决方案来将对象从一个地方移动和缩放到另一个地方。

我已使用此代码创建了JSfiddle。问题是我需要它在某个时候停止变小。所以它有一个最小尺寸，另一个问题是我希望它既缩小又向左移动？我可以用矩阵来实现吗？

$(window).scroll(function () {

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

});

提前谢谢你！

【问题讨论】：

降低高度是否足够好的解决方案？ .side { height: 900px; }
恐怕不行。我需要它在任何高度都能发挥作用。它需要在完全消失之前停止。
好的，向左移动怎么样......它应该到达哪里？直到它触及屏幕的左侧？

标签： javascript jquery scroll scrolltop

【解决方案1】：

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

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

位置见translate (MDN)。您可以在同一行设置缩放和翻译（即transform: scale(...) translate(...)）。

【讨论】：