我使用此处提供的示例来设置响应式导航栏

https://theinfogrid.com/tech/developers/angular/responsive-navbar-angular-flex-layout/

我的代码看起来很相似

<div style="height: 85vh;">

  <mat-toolbar color="primary" mat-scroll-shrink>
    <span>{{title}}</span>
    <span class="example-spacer"></span>
    <div fxShow="true" fxHide.lt-md="true">
      <!-- The following menu items will be hidden on both SM and XS screen sizes -->
      <a href="#" mat-button>Home</a>
      <a href="#" mat-button>About</a>
      <a href="#" mat-button>Services</a>
      <a href="#" mat-button>Portfolio</a>
      <a href="#" mat-button>Start</a>
      <a href="#" mat-button>FAQ</a>
      <a href="#" mat-button>Blog</a>
      <a href="#" mat-button>Contact</a>
    </div>

    <div fxShow="true" fxHide.gt-sm="true">
      <a href="#" (click)="sidenav.open()">Show Side Menu</a>
    </div>
  </mat-toolbar>

  <mat-sidenav-container fxFlexFill class="example-container">
    <mat-sidenav #sidenav fxLayout="column">
      <div fxLayout="column">
        <a (click)="sidenav.close()" href="#" mat-button>Close</a>
        <a href="#" mat-button>Home</a>
        <a href="#" mat-button>About</a>
        <a href="#" mat-button>Services</a>
        <a href="#" mat-button>Portfolio</a>
        <a href="#" mat-button>Start</a>
        <a href="#" mat-button>FAQ</a>
        <a href="#" mat-button>Blog</a>
        <a href="#" mat-button>Contact</a>
      </div>
    </mat-sidenav>
    <mat-sidenav-content fxFlexFill>

      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

我希望发生的事情是在我向下滚动时缩小 mat-toolbar，这在很多网站中都很常见，比如这个网站:

https://www.havealook.com.au/

我不会发布其余的 Angular 5 代码，只需按照示例重新创建 - 它非常快。

我在这里看过 Material 网站

https://material.angular.io/components/toolbar/overview

但是没有太多关于如何添加的解释，而且我对这些东西还很陌生。有谁知道我可以如何自定义它以根据滚动缩小工具栏？

最佳答案

2018 年 11 月更新

Angular CDK v7 弃用了 ScrollDispatchModule。请改用 ScrollingModule。

我创建了一个 Stackblitz带有向下滚动时会缩小的工具栏。

主要步骤

使用CdkScrollDispatcher服务对滚动事件使用react

1. 在您的模块中导入 ScrollDispatchModule。

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

1. 标记滚动事件与指令cdkScrollable相关的容器，这里是mat-sidenav-content。

 <mat-sidenav-content fxFlexFill cdkScrollable>

1. 在组件的 ngOnInit 中响应滚动事件，获取 scrollTop 位置，如果它大于某个阈值则设置一个标志:

private readonly SHRINK_TOP_SCROLL_POSITION = 50;
shrinkToolbar = false;

constructor(private scrollDispatcher: ScrollDispatcher,
            private ngZone: NgZone) { }

ngOnInit() {
  this.scrollDispatcher.scrolled()
    .pipe(
      map((event: CdkScrollable) => event.getElementRef().nativeElement.scrollTop)
    )
    .subscribe(scrollTop => this.ngZone.run(() => this.shrinkToolbar = scrollTop > this.SHRINK_TOP_SCROLL_POSITION ? true : false));
}

您需要使用 ngZone 运行它，因为 ScrollDispatcher 的 scrolled() 事件默认在 Angular 之外运行。没有它，ChangeDetection 将不会运行，您的模板也不会更新。

滚动时更改工具栏布局

1. 添加一个 shrink css 类，当容器向下滚动时

<mat-toolbar color="primary" [ngClass]="{'shrink-toolbar': shrinkToolbar}">

1. 为收缩 布局定义 css 类。

.shrink-toolbar {
  height: 32px;
}

在 official docs 中查找有关滚动服务的更多信息.

关于javascript - 可收缩垫工具栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48454369/