如何使 Material 工具栏在滚动时不透明并在开始时透明？

Question

我目前正在尝试熟悉 Angular。我正在使用有角度的材料，我希望使材料工具栏在滚动时具有粘性和不透明，并且在页面顶部时工具栏文本仍然可见。到目前为止，我搜索的所有内容都涉及 javascript 或 jquery。我该如何精确地以 8 角进行呢？

这分别是我的 HTML 和 CSS：

<mat-toolbar color="primary">
  <a mat-button [routerLink]="['home']" >
    <h1>PETER<span class="light">CONSTRUCTION</span></h1>
  </a>
  <span class="spacer"></span>
  <a mat-button [routerLink]="['home']" routerLinkActive="active" >HOME</a>
  <a mat-button [routerLink]="['about']" routerLinkActive="active">ABOUT</a>
  <a mat-button [routerLink]="['contact']" routerLinkActive="active">CONTACT</a>
</mat-toolbar>

---

  mat-toolbar {
  position: absolute;
  z-index: 1;
  overflow-x: auto;
  background-color: #c3cfd2;

}

mat-toolbar-row {
  justify-content:space-between;

}

.spacer {
  flex: 1 1 auto;
}

a.active {
  background-color: rgba(0,0,0, 0.3);
}

h1 {
  margin: 0;
  color: black;
}

h1 .light {
  font-weight: 100;

}

/*.x-bar.x-bar-absolute{*/
/*  background-color: hsla(276, 6%, 63%, 0.15) !important;*/
/*  transition: none !important;*/
/*}*/

/*.x-bar.x-bar-fixed{*/
/*  background-color: hsla(276, 6%, 63%, 1) !important;*/
/*}*/

/*.x-bar [class^="x-bg"] {*/
/*  background-color: transparent !important;*/
/*}*/

/*.x-bar.x-bar-absolute .hm5.x-menu > li > .x-anchor .x-anchor-text-primary {*/
/*  color: #fff;*/
/*}*/

/*.x-bar.x-bar-fixed .hm5.x-menu > li > .x-anchor .x-anchor-text-primary {*/
/*  color: #000;*/
/*}*/

Answer 1

有多种方法可以实现这一点，但由于您已经在使用@angular/material，您可以利用@angular/cdk，它是ScrollDispatchModule（请参阅docs）。

它使您可以轻松干净地观察 NgZone 之外注册元素的滚动事件，这意味着它对性能的影响很小。

查看示例 stackblitz： https://stackblitz.com/edit/angular-npdbtp

首先，您需要导入ScrollDispatchModule并为ScrollDispatcher注册提供者：

import {ScrollDispatchModule, ScrollDispatcher} from '@angular/cdk/scrolling';

@NgModule({
  imports: [
    (other imports)
    ScrollDispatchModule
  ],
  providers: [ScrollDispatcher]
})
export class AppModule {}

然后在您的模板中，您可以使用cdkScrollable 指令标记一个html 元素。这将自动将其注册到ScrollDispatcher。 您还可以将组件的样式（例如不透明度）绑定到组件中定义的属性：

<div class="scroll-wrapper" cdkScrollable>
  <mat-toolbar class="sticky-toolbar" [style.opacity]="opacity">My App</mat-toolbar>
  <div>content</div>
</div> 

您可以使用display: sticky 和top: 0 一起使html 元素具有粘性：

.sticky-toolbar {
  position: sticky;
  top: 0px;
}

然后您需要将ScrollDispatcher 和NgZone 注入到您的组件中并定义 opacity 属性：

  opacity = 1;
  constructor(
    private scrollDispatcher: ScrollDispatcher,
    private zone: NgZone
  ) {}

然后就可以订阅 ScrollDispatcher 的滚动事件了。这些是为所有注册的组件发出的。您还可以注册以滚动单个元素的事件 - 如果需要，请参阅文档。

  ngOnInit(): void {
    this.scrollDispatcher.scrolled().subscribe((event: CdkScrollable) => {
      const scroll = event.measureScrollOffset("top");
      let newOpacity = this.opacity;

      if (scroll > 0) {
        newOpacity = 0.75;
      } else {
        newOpacity = 1;
      }

      if (newOpacity !== this.opacity) {
        this.zone.run(() => {
          this.opacity = newOpacity;
        });
      }
    });
  }

ScrollDispatcher 在 NgZone 之外运行，这意味着它不会在整个应用程序中运行更改检测。这可以带来更好的性能，这也是我们注入 NgZone 并在区域内运行属性更改的原因 - 这会调用组件树中的正确更改检测。