Reputation:
--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]
Upvotes: 2
Views: 115
Reputation: 4078
calc()
function only allows multiplication when at least one side is unitless.The multiplication here is not currently possible with CSS:
height: calc(var(--max-height) - var(--dis) * var(--percent-limited));
CSS tricks article on calc()
Upvotes: 1