如何为 Web 实现 Material Banner 组件？

Question

我正在 Angular（Dart 风格）中实现一个材质横幅组件，详细描述如下：https : //material.io/components/banners

除了这个行为部分，我几乎完全符合规范：https : //material.io/components/banners/#behavior

即：

屏幕加载后出现的横幅应从布局顶部开始在屏幕上显示动画。如果横幅与内容处于同一高度，则会将内容向下推。

所以如果我理解正确的话，横幅应该是正常布局流程的一部分，应该在出现时设置动画和下推内容，并且在向下滚动页面时也应该是粘性的（到顶部）。我只是无法找到满足所有这些要求的 CSS 属性和/或 Javascript 补充代码的组合。

到目前为止我尝试过的：

banner {
  position: sticky;
  top: 0;
  transition: transform 0.3s ease;
  transform: translateY(-100%);

  &.show {
    transform: translateY(0);
  }
}

这满足了页面向下滚动时的粘性要求，横幅本身在出现和消失时具有动画效果，但是当不可见时，它会在布局中留下间隙。这是预期的，因为 CSS 转换不会影响正常流程（https://www.w3.org/TR/css-transforms-1/#transform-rendering）

如果我将sticky定位更改为绝对，它不会在流程中留下间隙，但它会充当叠加层，并且在缓入时不会下推内容。在这种情况下，我也失去了粘性功能（但这可以解决通过基于当前滚动值的元素的 Javascript 调整）。

我已经尝试了max-height为横幅属性设置动画的可怕技巧，如此处所建议的：https : //stackoverflow.com/a/8331169/405481 我也尝试将其与 translateY 动画结合使用，但没有任何摆弄导致平滑滚动，同时推拉下面的内容。

所以。有没有办法在 HTML/CSS/Javascript 域中实现上述行为？