I'm implementing a material banner component in Angular (Dart flavor) as described in detail here: https://material.io/components/banners
I'm almost fully compliant with the spec except for this behavior part: https://material.io/components/banners/#behavior
Namely:
Banners that appear after a screen loads should animate on screen from the top of a layout. If the banner is at the same elevation as content, it pushes content downwards.
So if I understand correctly, banners should be part of the normal layout flow, should animate and push down content when appearing, and also should be sticky (to the top) when scrolling down the page. I'm simply unable to find a combination of CSS properties and/or Javascript supplementary code that will satisfy all these requirements.
What I've tried so far:
banner {
position: sticky;
top: 0;
transition: transform 0.3s ease;
transform: translateY(-100%);
&.show {
transform: translateY(0);
}
}
This satisfies the sticky requirement when the page is scrolled down, the banner itself animates when appearing and disappearing, but when not visible, it will leave a gap in the layout. This is expected as CSS transformations won't affect the normal flow (https://www.w3.org/TR/css-transforms-1/#transform-rendering)
If I change the sticky positioning to absolute, it will not leave a gap in the flow, but it will act as an overlay and will not push down content when easing in. In this case I also lose the sticky functionality (but that could be solved by Javascript adjustment of the element based on the current scroll value).
I've tried the terrible hack of animating the max-height property of the banner, as suggested here: https://stackoverflow.com/a/8331169/405481
I also tried this in combination with the translateY animation, but no amount of fiddling resulted in a smooth scroll while simultaneously pushing and pulling the content below.
So. Is there any way to achieve the above behavior in the HTML/CSS/Javascript domain?
