当下拉滚动时，Angular中的标题会消失，而上滚时则会重新出现

我们将使用Angular来实现Facebook的SP应用程序。据说在jQuery和Angular 1.x系列中可以使用名为Headroom.js的库实现，但不幸的是，它不支持Angular 2/4系列，所以我们决定用其他的方法来实现。

我想要实现的是这个动作↓
Headroom.js演示

请根据以下进行参考。

有人在使用jQuery进行实现，所以我参考了这个。非常有用。
http://weboook.blog22.fc2.com/blog-entry-412.html

为了捕获Window事件，我使用了HostListener。
http://blog.yuhiisk.com/archive/2016/05/12/angular2-window-event.html

我使用了DOCUMENT来进行DOM访问。
https://angular.io/api/platform-browser/DOCUMENT

做过的事情 (zuò guò de shì

首先，创建一个基础的Angular项目。
这次我使用angular-cli创建了基础项目。

ng new angular-hide-header-sample

基于该基础的项目

src
├── src/app
│   ├── src/app/app.component.css
│   ├── src/app/app.component.html
│   ├── src/app/app.component.spec.ts
│   ├── src/app/app.component.ts
│   └── src/app/app.module.ts
├── src/assets
├── src/environments
│   ├── src/environments/environment.prod.ts
│   └── src/environments/environment.ts
├── src/favicon.ico
├── src/index.html
├── src/main.ts
├── src/polyfills.ts
├── src/styles.css
├── src/test.ts
├── src/tsconfig.app.json
├── src/tsconfig.spec.json
└── src/typings.d.ts

创建标题组件

在使用angular-cli创建的项目中添加一个头部组件。

ng g component header

<nav class="header">
  <!-- 実際にはここにmenuを実装 -->
  <p>header</p>
</nav>

.header {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: rgba(0,0,0,.5);
  transition: .5s;
}

将头部组件添加到 app.component 中。

我在使用angular-cli创建的顶级页面上直接添加了追加内容。

<app-header></app-header>
<!--The content below is only a placeholder and can be replaced.-->
<!-- ...略 -->

在这一点上，运行npm start并从浏览器打开localhost:4200，应该会显示如下内容。 此时，标题栏仍然固定在顶部，但稍后我们将进一步进行修改。

修改标题组件

我们会实现切换显示逻辑。
为了动态地改变头部位置，我们会让组件通过[style.top.px]来设置CSS的值。

<nav class="header" [style.top.px]="headerPos">
  <p>header</p>
  <!-- 実際にはここにmenuを実装 -->
</nav>

将HostListener DOCUMENT注入并分别导入。
在类的成员变量中，将ofset指定为标题的高度。

import { Component, OnInit, Inject, HostListener } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  private ofset: number = 60;
  private startPos: number = 0;
  private headerPos: number = 0;


  constructor(@Inject(DOCUMENT) private document: Document) { }
  ngOnInit() {
  }

  @HostListener('window:scroll', ['$event'])
  onScroll(event) {
    let currentPos = this.document.body.scrollTop;
    if(currentPos > this.startPos) {
      if(this.document.body.scrollTop >= this.ofset) {
        this.headerPos = -this.ofset;
      }
    } else {
      this.headerPos = 0;
    }
    this.startPos = currentPos;
  }

}

做完

以类似的方式，它会以相似的动作运动。

样本

这次创建的示例项目已经放在GitHub上了。