如何仅当 header 为 "revealed" 时才具有背景色 Polymer

Question

我想重新创建此演示中的行为，其中 header 背景是透明的，除非 header 是 "revealed"。

https://www.webcomponents.org/element/polymerelements/app-layout/v2.1.1/demo/app-header/demo/music.html

我已经设置了 effects 和 reveals 属性。

<app-header role="navigation" id="header" effects="waterfall" condenses reveals>
  <app-toolbar>
     <a href="/">Home</a>
     <a href="/values">Value Proposition</a>
     <a href="/manufacturers">Manufacturers</a>
     <a href="/our-team">Our Team</a>
  </app-toolbar>
</app-header>

是否有 CSS select 或者当 header 处于显示状态时我可以使用它来获得白色背景，否则是透明的？

即当滚动位置 < 30 像素时透明，当滚动位置 >= 30 像素时白色。

文档指出 app-header 有两个背景层，可用于在 header 压缩或可滚动元素滚动到顶部时设置样式，但我没有看到在哪里/如何 select 它们。

设置

app-header {
  background: rgba(255,255,255,0);
  --app-header-background-front-layer: {
    background: rgba(255,255,255,1);
  };
  --app-header-background-rear-layer: {
    background: rgba(255,255,255,0);
  };
}

没有效果。

Answer 1

仅当滚动位置位于顶部时，链接演示中的 header 才会淡出其背景。要启用它，请将 fade-background 添加到 <app-header>.effects 并使用 --app-header-background-rear-layer CSS 属性设置显示滚动条时可见的背景颜色：

<style>
  app-header {
    @apply --layout-fixed-top;
    --app-header-background-rear-layer: {
      background-color: #fff;
    };
  }
</style>
<app-header effects="fade-background" ...></app-header>

请注意 --app-header-background-front-layer CSS 属性不用于此效果。

demo

如何仅当 header 为 "revealed" 时才具有背景色 Polymer

How to have background color only when header is "revealed" Polymer

css

attributes

polymer