当工具栏组件不在页面顶部时隐藏它

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 窗口：滚动

  @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,...],
})

Answer 2

在样式中添加 位置：固定； z-索引：1000； 将样式赋予标题的主 div。

Answer 3

在正文标签中使用(window:scroll)="eventToBeCalled()"

为工具栏分配一个 id： <mat-toolbar color="primary" id="matTB">

在打字稿中

eventToBeCalled(): void {
   const matToolBar = document.getElementById('matTB');
   if(window.scrollY > 104)
   {
    matToolBar.setAttribute('style', 'display:none');
   } else {
    matToolBar.removeAttribute('style');
   }
}