如何在滚动受 javascript 中的滚动和高度范围限制时按比例减小元素高度？

Question

我有一个高度为 100 的元素，当 window 滚动超过 70px 时，高度应按比例降低，当滚动达到 200px 时达到 40。

scroll = 70px => height = 100
window.scrollY = 90 => y = ?
scroll = 200px => height = 400

这是我的代码：

function whileScrolling () {
   if(window.scrollY < 70) {
      newHeight = 100
   } else  if (window.scrollY > 200) {
      newHeight = 40
   } else if (window.scrollY > 70) {
      const scrollRange = {
         min: 70,
         max: 200
      };
      const heightRange = {
         min: 40,
         max: 100
      }
      let currentScroll = window.scrollY

      newHeight = ?

   }
}

滚动时触发

如何计算y？

Answer 1

简单的线性方程：

y=-6/13*currentScroll+1720/13;

数字不那么漂亮的原因是 70px。如果你选择 50px 代替，数字会更漂亮（但可能生成的网站不会。这取决于你......）

但你也应该遵守限制：

scroll <= 70px => height = 100
scroll >= 200px => height = 40

然后限制在那些卷轴上。

你真的不需要 scrollRange 或最后一个 else if。

function whileScrolling () {
   if(window.scrollY < 70) {
      newHeight = 100;
   } else  if (window.scrollY > 200) {
      newHeight = 40;
   } else {

      let currentScroll = window.scrollY

      newHeight = -6/13*currentScroll+1720/13;

   }
}

这些数字是这样计算的：

点 A 和 B 是 (scroll: 70, height: 100),(scroll: 200, height: 40).
它们之间的线是卷轴和所需高度之间的关系。从那里开始是数学：斜率是 (40-100)/(200-70)，即 -6/13。而1720来自线方程的代数

如何在滚动受 javascript 中的滚动和高度范围限制时按比例减小元素高度？

How to reduce element height proportionally while scrolling limited by a scroll and height range in javascript?

javascript

animation

scroll

algebra