--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));
}
Despite these calculations, the height does not change.
The variable --percent-limited operates as follows: It represents the function y=(x-1-abs(x-1))/2+1
Since x can never be less than 0, the range of y is [0,1]