--dis: calc(var(--max-height) - var(--min-height)); /* @media large{--min-height:13rem}; @media small{--min-height:6.5rem}; --max-height:75vh; */ --percent: calc(var(--scroll-ani) / var(--dis)); /* in js: document.body.style = "--scroll-ani:" + document.scrollingElement.scrollTop; This code will correctly output the distance between the top of the visual area and the top of the page */ --percent-limited: calc((var(--percent) - 1 - abs(var(--percent) - 1)) / 2 + 1); /* If percent > 1, percent-limited = 1, If percent < 1, percent-limited = percent, Percent cannot be less than 0. */ obj{ position: fixed;/* header itself will not cause the page height to change*/ width:100vw; height: calc(var(--max-height) - var(--dis) * var(--percent-limited)); }

Pero la altura permanece sin cambios.

--porcentaje de trabajo limitado como este: Es la gráfica de y=(x-1-abs(x-1))/2+1

x nunca será menor que 0, por lo que el rango de y será [0,1]