--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]