Comment réduire la hauteur de l'élément proportionnellement tout en défilant limité par un défilement et une plage de hauteur en javascript?

Question

J'ai un élément avec une hauteur de 100, lorsque la fenêtre défile dépasser 70px, la hauteur doit être réduite proportionnellement pour atteindre 40 lorsque la défilement atteint 200px.

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

ceci est mon code:

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 = ? 

    } 
} 

onScrolling incendie

Comment calculer y?

Answer 1

simple équation linéaire:

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

La raison du nombre pas si joli est le 70px. Si vous avez choisi, par exemple, au lieu 50px, les chiffres seraient beaucoup plus joli (mais peut-être il est à votre site ne sera pas en résultant ....)

Mais vous devez aussi garder les limites:

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

Et puis c'est limité à ces parchemins. Vous n'avez pas vraiment besoin du scrollRange ou du dernier 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; 

    } 
} 

Ces chiffres sont calculés comme suit:

Points A et B sont (scroll: 70, height: 100), (scroll: 200, height: 40).
La ligne entre eux est la relation entre le défilement et la hauteur voulue. De là, c'est mathématique: la pente est (40-100)/(200-70) qui est -6/13. Et le 1720 provient de l'algèbre de l'équation de ligne.