--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));
}
But height remains unchanged.
–percent-limited work like this:
It’s graph of y=(x-1-abs(x-1))/2+1
x will never be less than 0, so range of y will be [0,1]