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

Question

我有一个高度为 100 的元素，当窗口滚动超过 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来自直线方程的代数。