css - 不在页面顶部时隐藏工具栏组件

Question

我有一个这样的工具栏
它的背景是透明的。但是当我向下滚动时，这看起来像
如何在页面向下滚动时隐藏此组件并在向上滚动到页面顶部时显示它？ 我的英语不是很好。对此感到抱歉。

编辑: 我使用 mat-toolbar

<mat-toolbar color="primary">

<button mat-button routerLink="/" [ngStyle]="{'color': colorStyle === 'WHITE' ? 'white' : 'black'}">
<mat-icon>home</mat-icon> 
{{ 'PAGE.HOME' | translate}}</button>

<!-- This fills the remaining space of the current row -->
<span class="fill-remaining-space"></span>
<div fxLayout="row" fxShow="false" fxShow.gt-sm [ngStyle]="{'color': colorStyle === 'WHITE' ? 'white' : 'black'}">
    <button mat-button routerLink="['/home']">{{ 'PAGE.HOME' | translate}}</button>
    <button mat-button routerLink="['/home']">{{ 'PAGE.D9' | translate}}</button>
    <button mat-button routerLink="['/home']">{{ 'PAGE.DThuDuc' | translate}}</button>
    <button mat-button routerLink="['/home']">{{ 'PAGE.MORE' | translate}}</button>
    <button mat-button [routerLink]="['/add']">{{ 'PAGE.ADD' | translate}}</button>
    <button mat-button [routerLink]="['/login']" *ngIf="!loginStatus">{{ 'PAGE.LOGIN' | translate}}</button>
    <button mat-button [routerLink]="['/login']" *ngIf="loginStatus">{{ 'PAGE.LOGOUT' | translate}}</button>
    <button mat-button [routerLink]="['/show-map']" [queryParams]="{ lat: data.lat, lng: data.lng}">{{ 'PAGE.OVERVIEW' | translate}}</button>



</div>
<button mat-button [mat-menu-trigger-for]="menu" fxHide="false" fxHide.gt-sm>
 <mat-icon>menu</mat-icon>
</button>

</mat-toolbar>

.mat-toolbar {

    position: fixed;
    z-index: 999;
}

Answer 1

只需使用@HostListener window:scroll

  @HostListener("window:scroll", [])
  onWindowScroll() {
    let number = window.pageYOffset || 0;
    console.log(number);
  }

一些作者认为引用窗口目录是一种不好的做法。 Brian Love 提出了一个“窗口提供者”:参见 http://brianflove.com/2018/01/11/angular-window-provider/

Brian Love 提出解决方案:

****这是引用文章的复制和粘贴********

import { isPlatformBrowser } from "@angular/common";
import { ClassProvider, FactoryProvider, InjectionToken, PLATFORM_ID } from '@angular/core';

/* Create a new injection token for injecting the window into a component. */
export const WINDOW = new InjectionToken('WindowToken');

/* Define abstract class for obtaining reference to the global window object. */
export abstract class WindowRef {

  get nativeWindow(): Window | Object {
    throw new Error('Not implemented.');
  }

}

/* Define class that implements the abstract class and returns the native window object. */
export class BrowserWindowRef extends WindowRef {

  constructor() {
    super();
  }

  get nativeWindow(): Window | Object {
    return window;
  }

}

/* Create an factory function that returns the native window object. */
export function windowFactory(browserWindowRef: BrowserWindowRef, platformId: Object): Window | Object {
  if (isPlatformBrowser(platformId)) {
    return browserWindowRef.nativeWindow;
  }
  return new Object();
}

/* Create a injectable provider for the WindowRef token that uses the BrowserWindowRef class. */
const browserWindowProvider: ClassProvider = {
  provide: WindowRef,
  useClass: BrowserWindowRef
};

/* Create an injectable provider that uses the windowFactory function for returning the native window object. */
const windowProvider: FactoryProvider = {
  provide: WINDOW,
  useFactory: windowFactory,
  deps: [ WindowRef, PLATFORM_ID ]
};

/* Create an array of providers. */
export const WINDOW_PROVIDERS = [
  browserWindowProvider,
  windowProvider
];

在组件的构造函数中

constructor(@Inject(WINDOW) private window: Window)

在模块中

@NgModule({
  declarations: [..]
  imports: [..]
  providers: [WINDOW_PROVIDERS,...],
})