代码之家 › 专栏 › 技术社区 › Web Steps

在javascript中,当滚动受到滚动和高度范围的限制时,如何按比例减少元素高度?

algebra scroll animation javascript

Web Steps · 技术社区 · 7 年前

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?

1 回复 | 直到 7 年前

ItamarG3 7 年前

简单线性方程:

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 来自线性方程的代数。